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>

除了 class 实际上并没有改变。那么，模板中的值得到更新，但 ng-class 没有得到评估？给出了什么？

Answer 1

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

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

Answer 2

出于某种原因，我不是 100% 确定原因，但 <button> 标签不会更新 class，<input type="button"> 也不会。解决这个问题的方法是用你绑定的任何东西声明 class 例如

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

*检查第一个按钮，您将看到 class 变化

Answer 3

你可以使用

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

或

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

with isState 是作用域上的函数，将 $state.current.name 与参数进行比较并返回 true 或 false

编辑如果你的后退按钮在你的控制器之外，这个下一个解决方案也适用，只要意识到ui-路由器有这个函数isState调用它'is' .

因此您可以将 $state 添加到 $rootScope

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

});

然后在后退按钮中使用它

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

Angular's ng-class is not updating while the value being evaluated is