如何根据角度路径添加和删除类？

Question

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

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

我可以在“外部控制器”中添加一些内容吗？

<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");
            });

        }
    }
}]);

Answer 2

您需要创建一个变量并使用ng-class

例如$ scope.page是您的变量，其分配值取决于页面

if(currentpage==exterior)$scope.page=1
if(currentpage==interior)$scope.page=2
if(currentpage==gallery)$scope.page=3
if(currentpage==discover)$scope.page=4

然后使用如下指令：

    <section>
    <nav >
    <ul class="nav footer-tabs">
        <li class="exterior col-sm-4" ng-class="{'disable':page==1}"><a href="#/exterior"><img src="img/colour-options.png"></a></li>
        <li class="interior col-sm-4" ng-class="{'disable':page==2}"><a href="#/interior"><img src="img/Interior-360.png"></a></li>
        <li class="gallery col-sm-4" ng-class="{'disable':page==3}"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li>
        <li class="discover col-sm-4" ng-class="{'disable':page==4}"><a href="#"><img src="img/UP-Discover.png"></a></li>
    </ul>
    </nav>
</section>

如果要隐藏按钮有更好的方法，请使用ng-hide代替ng-class，例如：

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

Answer 3

有不同的方法，但是尝试一下

<li ng-class="{interior: currentpage == 'interior'}">

其中currentpage是当前的$ scope变量，这意味着当currentpage等于internal时，将添加内部类。