Question

我非常是Angular的新手，所以我确定这不是正确的但我有一组<li>个元素，它们还包含链接（个别地，他们只是我页面的导航按钮）。我想要的是保留特定的按钮，比如，＆＃34; Home＆＃34;当用户在该页面上时突出显示某种颜色。所以我的html大致看起来像这样......

    <li class="active menuBar">
      <a ui-sref="aap.configure.views" change-css="aap.isActive()">
        <div class="row text-center">
           <span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true" style="font-size: 2.5em;"></span>
        </div>
        <div class="row">
           <span class="glyphicon-class">Home</span>
        </div>
      </a>
    </li>

我昨天刚刚写了我的第一个自定义指令，所以这是我的第二次尝试...

app.directive( 'changeCss', [ '$location',
    function ( ) {
        return {
            restrict: 'A',
            scope: {
                active: '&'
            },
            link: function( $scope, element, attrs ){
                if( $scope.active ){
                    element.addClass( 'actives');
                }
                else {
                    element.addClass( 'inActives' );
                }
            }

        };
    }
] );

我的isActive()函数看起来像......

    var active = false;
    $scope.aap.isActive = function( ){
        if ( active ){
            active = false;
            return true;
        } else {
            active = true;
            return false;
        };
    };

现在，当我加载页面时，所有导航按钮（Home，Save等）都是我喜欢的颜色。点击一个按钮，比如说，＆＃34; Home＆＃34;突出显示我喜欢的颜色按钮。但是，当我与该主页进行交互时，例如，单击一个折叠元素，颜色将返回到＆＃34;不活动＆＃34;颜色。我做错了什么？

Answer 1

我不是百分百肯定的。但我希望这对你有帮助。如果您想根据页面设置导航栏的有效/无效。

我通过将uri传递给函数getClass（）来使用ng-class来设置导航栏的活动状态（请参阅此处https://docs.angularjs.org/api/ng/directive/ngClass）。

<div class="col-sm-3 col-md-2 sidebar" ng-controller="mainCtrl">
    <ul class="nav nav-sidebar">
        <li ng-class="{'active': getClass('/dashboard')}" >
            <a href="/">
                Dashboard
            </a>
        </li>
        <li ng-class="{'active': getClass('/session')}">
            <a ng-href="/session">
                Sessions
            </a>
        </li>
    </ul>
</div>

在我的控制器上检查位置路径并发送布尔值以激活/停用ng-class

.controller('mainCtrl', ['$location','$scope', function ($location, $scope) {

        $scope.getClass = function(path) {            
            if ($location.path().substr(0, path.length) == path) {
              return true;
            } else {
              return false;
            }
        }           

    }]);

当元素处于活动状态时，指令会更改CSS

1 个答案: