10

重複の可能性：
AngularJSでアクティブなタブスタイルを設定する

AngularJSを使用していて、そのタブのコンテンツが表示されているときはいつでも、メニューに「現在の」クラスを追加しようとしています。これは私がこれまでに持っているものであり、ページをロードするときに正常に機能します。

HTML：

<ul id="nav">
    <li><a href="#/one" class="highlighttab">One</a></li>
    <li><a href="#/two" class="highlighttab">Two</a></li>
</ul>

JS：

myModule.directive('highlighttab', function($location) {
    var currentPath = "#" + $location.path();

    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            var href = element.attr("href");
            if (currentPath == href)
            {
                element.addClass("current");
            }
        }
    };
});

これにより、ページのURLがまたはである場合に、「current」クラスが正しい<a>タグに追加されます。#/one/#two

問題は、2番目のタブをクリックしても、クラスが追加されないことです。URLが変更されたときにディレクティブ内のコードを再実行する方法が必要だと思います。それを行う方法はありますか？

4

2 に答える 2

13

コメントでhttps://stackoverflow.com/a/12631214/1684860からのkfisのコードを使用して、location.path（）で$scope.watchを使用してこれを機能させています。

myModule.directive('highlighttab', ['$location', function(location) {

    return {
        restrict: 'C',
        link: function($scope, $element, $attrs) {
            var elementPath = $attrs.href.substring(1);
            $scope.$location = location;
            $scope.$watch('$location.path()', function(locationPath) {
                (elementPath === locationPath) ? $element.addClass("current") : $element.removeClass("current");
            });
        }
    };
}]);
于 2012-10-02T05:09:06.373 に答える
7

ngView / routeProviderを使用していると仮定すると、おそらくルート変更イベント、おそらく$routeChangeSuccess1をリッスンする必要があります。

たとえば、リンク関数の場合：

scope.$on("$routeChangeSuccess", function (event, current, previous) {
    if (current == href) {
      element.addClass("current");
    }
    else {
      element.removeClass("current");
    }
});

テストされていないため、「＃」の有無などをいじくり回す必要がある場合があります。変数が一度だけ評価されることを期待してcurrentPathいるので、その有効な範囲がより明確になるように、それをリンク関数に作り直したいと思うかもしれません。

1 [http://docs.angularjs.org/api/ng.$ro​​ute]

于 2012-10-01T10:46:28.207 に答える