UI-路由器 ng-class="$state.includes('name')" 在指令中不工作
UI-Router ng-class="$state.includes('name')" not working in a directive
我想使用 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);
};
}
一切正常,但我不明白为什么因为函数做的事情完全一样?
那是因为 $state
不在您的范围内。我建议您在 scope
中添加对 $state
的引用(使用 link 函数)。如果您可能在多个地方需要 $state
,我建议您使用模块/应用程序的 运行 函数将其添加到 $rootScope
:
angular
.module('yourModule')
.run([
'$rootScope',
'$state',
function ($rootScope, $state) {
$rootScope.$state = $state;
}
]);
这是一个范围问题,但您不想使用 $rootScope
;将以下内容放入 link
函数中就足够了:
scope.$state = $state;
您可以在模板中使用 ui-router 过滤器。
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#filters-1
你的情况:
ng-class="{ active: 'user' | includedByState }"
我想使用 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);
};
}
一切正常,但我不明白为什么因为函数做的事情完全一样?
那是因为 $state
不在您的范围内。我建议您在 scope
中添加对 $state
的引用(使用 link 函数)。如果您可能在多个地方需要 $state
,我建议您使用模块/应用程序的 运行 函数将其添加到 $rootScope
:
angular
.module('yourModule')
.run([
'$rootScope',
'$state',
function ($rootScope, $state) {
$rootScope.$state = $state;
}
]);
这是一个范围问题,但您不想使用 $rootScope
;将以下内容放入 link
函数中就足够了:
scope.$state = $state;
您可以在模板中使用 ui-router 过滤器。
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#filters-1
你的情况:
ng-class="{ active: 'user' | includedByState }"