javascript - 如何根据 Angular 路径添加和删除类？

Question

我有一个带有 4 个按钮的指令，当我在其中一个页面上时，我想在其中添加和删除类。

例如，当我在“外部”时要删除该按钮，而当我在“内部”时仅删除内部按钮。

我应该在“外部 Controller ”中添加一些东西吗？

<section>
    <nav>
        <ul class="nav footer-tabs">
            <li class="exterior col-sm-4"><a href="#/exterior"><img src="img/colour-options.png"></a></li>
            <li class="interior col-sm-4"><a href="#/interior"><img src="img/Interior-360.png"></a></li>
            <li class="gallery col-sm-4"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li>
            <li class="discover col-sm-4"><a href="#"><img src="img/UP-Discover.png"></a></li>
        </ul>
    </nav>
</section>

Answer 1

在菜单的每个 li 上考虑一个 menuItem 指令:

//Don't forget the $location dependency, to retrieve the current path
pf_app.directive('menuItem', ["$location", function ($location) {
    return{
        restrict: 'A',
        link : function (scope, element, attr) {
            //Watch location change event
            scope.$on('$locationChangeSuccess', function(){
                //Get the current path
                var path = $location.path(),
                //Get the child link of the current element
                    href = element.children("a").attr("href").slice(1);
                //If the paths matches
                if (href == path)
                    //Add the class
                    element.addClass("active");
                else
                    //Remove it
                    element.removeClass("active");
            });

        }
    }
}]);