Angular Js1.2에서 리디렉션을 방지하는 방법

Angular Js1.2에서 리디렉션을 방지하는 방법

애플리케이션에서 AngularJs-1.0.7과 Bootstrap을 사용하고 있었습니다.최근에 AngularJs-1.0.7에서 AngularJs-1.2로 마이그레이션했습니다.저는 부트스트랩의 아코디언과 탭을 사용하고 있습니다.

Tab의 HTML 코드는 다음을 포함합니다.<a href="#id_for_content">아래와 같이

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#firstTab" data-toggle="tab">Home</a></li>
    <li><a href="#secondTab" data-toggle="tab">Profile</a></li>
</ul>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="firstTab">
      <p>Content for first tab.</p>
    </div>
    <div class="tab-pane fade" id="secondTab">
      <p>Content For second tab.</p>
    </div>
</div>

Angular의 이전 버전에서는 다음과 같은 앵커 태그를 부여할 경우에만 경로 변경이 발생합니다.<a href="#/firstTab">. 그러나 AngularJs-1.2 리디렉션<a href="#firstTab">. 그것은 고려하지 않습니다./사이사이에#그리고.firstTab. 따라서 Tab을 클릭하는 동안 다음으로 리디렉션됩니다.http://web_url/#/firstTab. 이 문제를 해결하는 방법은 무엇입니까?

---

마이 솔루션

저는 이 문제에 대한 해결책을 찾았습니다.태그에 대한 지시문을 작성했습니다.나는 그 지시에 따라 href 속성을 확인했습니다.일치하는 경우 기본 동작을 방지합니다.다음 코드를 확인합니다.

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.href === '#firstTab'|| attrs.href === '#secondTab'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
}); 

하지만 이 방법의 문제점은 여기에 있는 모든 탭이나 아코디언 ID를 일일이 확인해야 한다는 것입니다.동적 ID를 사용하면 지시 체크인이 불가능합니다.

더 나은 해결책을 찾을 수 있다면 우리 모두에게 알려주세요.

링크에 추가하기만 하면 됩니다.

target="_self"

준비되셨습니다 ;)

해라data-target="#something", 개발과 생산 환경 모두에서 잘 작동합니다.

컨트롤러에서 기능을 정의하지 않고 이 문제를 해결할 수 있는 또 다른 솔루션이 있음을 알려드립니다.

기본 브라우저의 동작(실제로 URL이 변경됨)을 방지하는 지시문을 만들 수 있습니다.

var PreventDefault = function () {

    var linkFn = function (scope, element, attrs) {
        $(element).on("click", function (event){
            event.preventDefault();
        });
    };

    return {
        restrict: 'A',
        link: linkFn
    }
};

그 다음에 각각의 지시사항을 추가하면 됩니다.a다음과 같은 탭 토글을 담당하는 요소:

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#firstTab" prevent-default data-toggle="tab">Home</a></li>
    <li><a href="#secondTab" prevent-default data-toggle="tab">Profile</a></li>
</ul>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="firstTab">
      <p>Content for first tab.</p>
    </div>
    <div class="tab-pane fade" id="secondTab">
      <p>Content For second tab.</p>
    </div>
</div>

일반적으로 루트 스코프를 사용하여 모든 스코프의 프로토타입에 함수를 정의할 수 있습니다.앵커 태그를 추가하고 $ 이벤트를 루트스코프 핸들러에 전달합니다.Angular는 ng-click과 함께 발신 이벤트도 보낼 수 있습니다.

<a ng-click="tabclick($event)">

모듈의 실행 블록에서 탭을 설정할 수 있습니다. $rootScope에서 Click 함수를 클릭합니다.

$rootScope.tabclick = function ($event) { $event.preventDefault(); }

이 기능은 모든 스코프에 사용할 수 있으며 특정 요소 ID를 확인할 필요가 없습니다.

샘플 피들:http://jsfiddle.net/stto3703/wQe6P/

건배.

ng-click을 사용하여 JS에서 함수를 호출할 수 있습니다.해당 기능에서 이벤트의 기능을 사용합니다.preventDefault방법 및 용도$location의hashURL의 해시를 변경하는 메서드입니다.

저도 한동안 이 문제를 겪고 있었는데, 방금 이 질문(그리고 독자 분 자신의 대답)을 우연히 발견했습니다.솔루션이 거의 정확한 것으로 나타났습니다. 약간만 수정해도 원하는 대로 사용할 수 있습니다.

탭과 관련된 문제 외에도 드롭다운 링크에서도 이 문제가 발생했습니다. 이 링크는 클릭 시 메뉴를 드롭다운하는 대신 현재 페이지에서 멀어지는 방향으로 이동하고 있었습니다. 사실 이 문제는 데이터 토글 속성 집합에서 무언가를 전환하도록 설계된 모든 링크에서 발생합니다.

따라서 코드를 약간 수정하여 '토글' 속성이 있는지 확인하면 해결됩니다.

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.toggle){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

도움이 되길 바랍니다!

질문에 대한 해결책은 효과가 있지만 각 앵커의 ID를 확인할 필요가 없도록 변경합니다.

if (attrs.href === '#firstTab'|| attrs.href === '#secondTab')

로.

if (attrs.href && attrs.href.indexOf('#') > -1)

지시:

.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            if (attrs.href && attrs.href.indexOf('#') > -1) {
                elem.on('click', function (e) {
                    e.preventDefault();
                });
            }
        }
    };
})  

https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/ 에 대한 크레딧

내 솔루션: - inside app.js try "$locationProvider"를 추가합니다.hashPrefix('!');"

    .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
    $stateProvider
    .state('menu', {
        url: '/',
        cache: false,
        abstract: true,
        templateUrl: 'static/www/templates/menu.html'
    })
    .state('menu.main_page', {
    url: 'app/main',
    cache: false,
    views: {
        'menuContent': {
          templateUrl: 'static/www/templates/mainpage.html',
          controller: 'MainCtrl'
        }
    }
    })
    $locationProvider.hashPrefix('!');
    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');
        $state.go('menu.mainpage');
    });
   }])

• 내부 인덱스. html 추가 시도

  <meta name="fragment" content="!">

그리고 마르셀이 위에서 말한 것처럼

.directive('a', function () {
return {
    restrict: 'E',
    link: function (scope, elem, attrs) {
        if (attrs.href && attrs.href.indexOf('#') > -1) {
            elem.on('click', function (e) {
                e.preventDefault();
            });
        }
    }
};
})

그게 다에요! 저한테 효과가 있어요!

이전 답변에 실패할 경우 $timeout을 사용할 수 있습니다.이 경우 Angular를 사용했습니다.UI 탭...

vm.removeUserTab = function (user) {
    $timeout(function () {
        vm.activeTab = 0;
        var index = vm.userTabs.indexOf(user);
        vm.userTabs.splice(index, 1);
    });
};

언급URL : https://stackoverflow.com/questions/19995091/how-to-prevent-redirecting-a-href-something-in-angular-js1-2