当评估的值为时，Angular的ng-class不会更新

Question

所以，我不知道这里发生了什么。这是一个非常明显的误解，或ui-router和ng-class之间的错误。我的模板看起来像这样（使用Jade语法）：

button.back(ng-class="{ 'hidden':  {{'index.blog.article' | isState}}    }") back ){{'index.blog.article' | isState}})

在实时视图中，当状态'index.blog.article'不活跃时，您会看到：

<button ng-class="{ 'hidden':  false }" class="back ng-binding"> back false</button>

正如您所料。但是，当状态处于活动状态时，您会看到：

<button ng-class="{ 'hidden':  true }" class="back ng-binding"> back true</button>

除了该类实际上没有改变。那么，模板中的值会更新，但是ng-class不会被评估？是什么给了什么？

Answer 1

出于某种原因，我不是100％确定为什么，但<button>标记不会更新课程，<input type="button">也不会。解决这个问题的方法是用你所绑定的任何东西来声明这个类，比如

<button ng-class="{ hidden: true, unHidden: false }" class="{{ index.blog.article }}" />

JSFiddle

*检查第一个按钮，您将看到班级更改

Answer 2

你可以使用

ng-class="isState('article')?'hidden':''"

或

ng-class="{'hidden':isState('article')}"

with isState是范围比较$ state.current.name与param并返回true或false的函数

请参阅我的jsfiddle，它与按钮http://jsfiddle.net/5aj4qy81/或http://jsfiddle.net/5aj4qy81/1/一起工作

编辑如果您的后退按钮位于您的控制器之外，这个下一个解决方案也可以正常工作只是意识到ui-router有这个功能isState调用它＆＃39;是＆＃39;

所以你可以将$ state添加到$ rootScope

angular.module('myApp').run(function ($rootScope, $state, $stateParams) {
 $rootScope.$state = $state;
 $rootScope.$stateParams = $stateParams;

}）;

然后在后退按钮中使用它

ng-class="{'hidden':$state.is('article')}"

http://jsfiddle.net/5aj4qy81/3/

Answer 3

您是否尝试删除单引号？所以你的代码应该是这样的：

<div ng-class="{ hidden: true }" ...> back true</div>