UI-路由器 ng-class="$state.includes('name')" 在指令中不工作

Question

我想使用 ui-router 的能力来测试 ng-class

中的活动状态

如果我尝试这样做，它不起作用：

navTest.$inject = ["$compile", "$navbar", "$state"];
function navTest($compile, $navbar, $state) {
    var defaults = $navbar.defaults;

    var navTest = {
        restrict: 'E',
        template: '<nav class="navbar navbar-default" role="navigation">' +
            '<div class="container-fluid">' +
                '<div class="navbar-header">' +
                    '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">' +
                        '<span class="sr-only">Toggle navigation</span>' +
                        '<span class="icon-bar"></span>' +
                        '<span class="icon-bar"></span>' +
                        '<span class="icon-bar"></span>' +
                    '</button>' +
                    '<a class="navbar-brand" href="#">Brand</a>' +
                '</div>' +
                '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">' +
                    '<ul class="nav navbar-nav">' +
                        '<li data-ng-class="{active: $state.includes(\'user\')}"><a data-ui-sref="user.List">Link 1</a></li>' +
                        '<li data-ng-class="{active: $state.includes(\'technology\')}"><a data-ui-sref="technology.List">Link 2</a></li>' +
                    '</ul>' +
                '</div>' +
            '</div>' +
        '</nav>',   
        replace: true
    };
    return navTest; 
}

现在如果我在 "link" 函数中添加一个函数来测试活动状态（指令的）我将 : data-ng-class="{active: $state.includes(\'technology\')}" 替换为 data-ng-class="{active: isActiveState(\'technology\')}"

link : function (scope, elem, attrs) {
    scope.isActiveState = function (name) {                 
        return $state.includes(name);
    };
}

一切正常，但我不明白为什么因为函数做的事情完全一样？

Answer 1

那是因为 $state 不在您的范围内。我建议您在 scope 中添加对 $state 的引用（使用 link 函数）。如果您可能在多个地方需要 $state，我建议您使用模块/应用程序的运行函数将其添加到 $rootScope：

angular
    .module('yourModule')
    .run([
        '$rootScope',
        '$state',
        function ($rootScope, $state) {
            $rootScope.$state = $state;
        }
    ]);

Answer 2

这是一个范围问题，但您不想使用 $rootScope；将以下内容放入 link 函数中就足够了：

scope.$state = $state;

Answer 3

您可以在模板中使用 ui-router 过滤器。

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#filters-1

你的情况：

ng-class="{ active: 'user' | includedByState }"

UI-路由器 ng-class="$state.includes('name')" 在指令中不工作

UI-Router ng-class="$state.includes('name')" not working in a directive

javascript

angularjs

angularjs-directive

angular-ui-router

ng-class