javascript - Ng-Class 导致页面首次加载时两个类处于事件状态

Question

我正在尝试为 ng-class 设置一个值，但是当它第一次加载时，如果表达式计算结果为 true，则 ng-class 中的两个类都会应用于该标记。
我正在使用 font-awesome 并在两个图标之间切换。这是 ng 类的代码:

 <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请求。如果测试变量的计算结果为 false，则没有问题。但是，如果测试变量的计算结果为 true，则“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>

Angular 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)。然后，当我第二次单击它时，它会将测试更改为 true 并显示正确的图片(fa-check-square-o)。

任何帮助将不胜感激!

编辑:

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

更新:

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

Answer 1

这个问题快把我逼疯了。您正确使用了该指令。指令中一定存在一些竞争条件错误。

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

1. 将 $timeout() 添加到 Promise 回调中，在第一次加载时将变量的值设置为 true。 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';
   };
   

附注我确信您已经继续生活，所以这适用于遇到这个奇怪问题的其他人