javascript - 即使我的情况按预期发生变化，Angular ngClass 也没有更新我的类

Question

我正在创建的模板中有这样的东西

<div ui-view id="app" class="nng-3" ng-class="{ 'app-mobile': app.isMobile, 'app-navbar-fixed': app.layout.isNavbarFixed, 'app-sidebar-fixed': app.layout.isSidebarFixed, 'app-sidebar-closed': app.layout.isSidebarClosed, 'app-footer-fixed': app.layout.isFooterFixed }"></div>

app.layout.isNavbarFixed 等值初始化为零或一，并且第一次加载页面时，将适当的类插入到我的 div .但是，此后通过设置这些值的按钮进行的​​任何更改都不会通过 ng-class 反射(reflect)在我的 class 属性上。

如果我直接在我的模板中打印这些变量，例如。 {{app.layout.isSidebarFixed}} 我可以看到它们从 true 变为 false ，反之亦然，但是 ng-class 不会更新或删除任何新类。

我不确定从哪里开始寻找解决方案，因为我的知识有限，无法立即发现任何明显的错误。有谁知道导致此问题的原因吗？

Answer 1

我的一个解决方法是只为 ng 类切换操作模型变量:

1) 每当我的列表为空时，我更新我的模型:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2)每当我的列表不为空时，我设置另一个状态

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) 我在我的 ng 类上使用了这个额外的模型:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty'}"

更新*:您还可以根据需要添加任何其他状态并在 ng-class 中使用，例如:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-additional-state', liststate == 'additional-state'}"

因为你知道，一个最初为空的列表状态不等于一个被命令清空的列表。