Ng-Class 在页面首次加载时导致两个类处于活动状态

Question

我正在尝试为 ng-class 设置一个值，但是当它首次加载时，如果表达式的计算结果为 true，那么 ng-class 中的两个类都将应用于标签。
我正在使用 font-awesome 并在两个图标之间切换。下面是 ng-class 的代码：

 <div class="checkLabel checkbox handPointer" ng-click="test = !test">
     <i class="fa fa-fw fa-lg" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>
     <label>test</label>
 </div>

当我加载页面时，有一个更新测试变量的 http 请求。如果测试变量评估为假，则没有问题。但是，如果测试变量评估为真，那么“fa-square-o”和“fa-check-square-o”都将应用于 html 元素的类。当我检查浏览器上的元素时，我看到了这一点。

<i class="fa fa-fw fa-lg fa-square-o fa-check-square-o" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>

角度 HTTP 请求

var promise = $http.getData("URL");
promise.then(function(result) {
     // use the result
     $scope.test = true;
}

另一个注意事项是，当我单击 div 时，它会切换测试变量（确实有效）。因此，当页面加载时，如果测试变量评估为 true，那么它将显示错误图片（fa-square-o），因为这两个类都将被应用，并且当我第一次单击 div 时它不会更改图片，因为它将变量更改为 false 并且 ng-class 工作正常（显示 fa-square-o）。然后，当我第二次单击它时，它将 test 更改为 true 并显示正确的图片（fa-check-square-o）。

任何帮助将不胜感激！

编辑：

我发现了这个错误的一个奇怪方面。这段代码包含在一个角度指令中，根据选择的选项卡，该指令将可见或不可见。为简单起见，假设代码位于选项卡 A 上，并且还有另一个选项卡 B。选择选项卡 A 时将调用承诺。当在选项卡 A 上刷新页面时，会发生此错误。当在选项卡 B 上刷新页面，然后选择选项卡 A 时，将显示正确的图像。我希望我能很好地解释这一点，如果不是，请随时要求澄清。

更新：

我不确定这是否完全是一个解决方案，但我已经让它工作，我将初始值更改为 true。就像我说的那样，我不知道为什么会这样，但是当我将其更改为以 true 开头时，加载时会显示正确的图片，并且单击 div 时不会出现问题。

Answer 1

这个问题让我发疯了。您正确使用了该指令。指令中一定有一些竞争条件错误。

我使用两种不同的方法修复了它。我更喜欢#2。

1. 在第一次加载时将变量的值设置为 true 的 Promise 回调中添加一个 $timeout()。 1秒对我有用。不过，这似乎有点骇人听闻。

   .then(function(){
     $timeout(function(){
       $scope.test = true;
     }, 1000);
   }
   

2. 不要使用ng-class 指令。相反，在class 属性中使用插值。这不违反 Angular 规则。

   class="fa fa-fw fa-lg {{ getSquareClass() }}"
   
   $scope.getSquareClass = function(){
     return $scope.test ? 'fa-square-check-o' : 'fa-square-o';
   };
   

附：我相信你已经继续你的生活了，所以这是给遇到这个奇怪问题的其他人的

Answer 2

你试过了吗？

<i class="fa fa-fw fa-lg" ng-init="test=false" ng-class="{'fa-check-square-o': test, 'fa-square-o': !test}"></i>

Answer 3

我认为假设您不是使用真正旧版本的 Angular，您只是引用错误。尝试时会发生什么：

 <div class="checkLabel checkbox handPointer" ng-click="test = !test">
     <i class="fa fa-fw fa-lg" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>
     <label>test</label>
 </div>

如果这不起作用，请查看此帖子：AngularJS toggle class using ng-class