angularjs – angular-ui-router：如果状态匹配,则添加css类

发布时间：2020-12-17 18:00:19 所属栏目：安全来源：网络整理

导读：简单的维基我想在导航栏中显示一个编辑按钮是州==’页面’ v0.2.10 .state('page',{ url: "/wiki/{ns:[0-9a-zA-Z-/_]+}/{wp:[0-9a-zA-Z-/_]+}",templateUrl: "views/wiki/view.html",controller: "PageController"}) 我试过了 li ng-show="$state.$curren

简单的维基

我想在导航栏中显示一个编辑按钮是州==’页面’

v0.2.10

.state('page',{
    url: "/wiki/{ns:[0-9a-zA-Z-/_]+}/{wp:[0-9a-zA-Z-/_]+}",templateUrl: "views/wiki/view.html",controller: "PageController"
})

我试过了

<li ng-show="$state.$current.name == 'page'"><button type="button" class="btn btn-default navbar-btn">Edit</button></li>

和

<a ng-class="{hidden: $state.$current.name == 'page'}" class="btn navbar-btn btn-primary" ui-sref="edit">Edit</a>

甚至

$state.includes('page')

和

$state.is('page')

解决方法

我一直在项目中这样做.诀窍是在范围上添加一个方法来检查状态.

$scope.is = function(name){
   return $state.is(name);
}

$scope.includes = function(name){
   return $state.includes(name);
}

HTML：

<li ng-show="is('page')">
<a ng-class="{hidden: is('page')}">...</a>

我通常将它们放在根范围内,但它们非常有用.另一个需要考虑的是使用ui-sref-active指令.当您创建状态链接时,它们非常好,并且还希望在该状态处于活动状态时自动添加类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!