javascript - Angular JS View 尚未正确更新

Question

我在 AngularJS 中发现了一个与错误更新 View 相关的问题。它时常发生。问题是当模型获得新值时， View 不会被新模型值更新，而是旧值会被新模型值附加。

在排除故障时，我检查了该模型包含正确的值。

这是一个 View 。

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div class="container">
        <div ng-repeat="p in point" id="{{'point-' + p.Id}}" class="{{p.BackgroundClass}}">
            <div class="point-number">{{p.Id}}</div>
            <div class="{{p.ImageClass}}"></div>           
            <div class="point-amount">{{p.Amount}}</div>
            <div class="point-quantity">{{p.Quantity}}</div>            
        </div>
    </div></code></pre>
</div>
</div>

包含 SignalR 事件处理的 Controller 代码:

wetApiHubProxy.on('updatePointState', function (pointId, backgroundClassProp, imageClassProp) {
            pointsService.getPointById(pointId).then(function (point) {
                point.BackgroundClass = backgroundClassProp;
                console.log('imageClassProp ' + point.ImageClass);                    
                point.ImageClass = imageClassProp;
            });
        });

p.ImageClass 经常变化。 View 的更改/更新以正确的方式工作，直到有时出现新旧值的串联。

旧的 p.ImageClass 值为“point-state-configure”。新的 p.ImageClass 值为“pump-state-off”。

作为我的错误结果，其中 ImageClass 包含连接值:

   <div ng-repeat="p in points" id="point-4" class="point point-off" role="button" tabindex="0" style="">
            <div class="point-number ng-binding">4</div>
            <div class="point-state-configure pump-state-off" style=""></div>           
            <div class="point-amount ng-binding">926.93</div>
            <div class="point-quantity ng-binding">417.35 L</div>
        </div>

我尝试调用 $scope.$apply() 和 $evalAsync，但那是无望的。最奇怪的是，问题是自发发生的。唯一不变的条件是 $rootscope 包含大量子作用域。谁能告诉在哪里挖掘以及如何解决这个问题？

Answer 1

class 属性不适合以这种方式使用。您应该改用 ng-class 指令。

我为您创建了一个示例:https://jsfiddle.net/coldcue/o7q6gfs4/

JavaScript

angular.module('testApp', [])
  .controller("TestController", function($scope) {
    // Initialize the value
    $scope.state = "state-blue";

    // Change class on click
    $scope.click = function() {
      $scope.state = ($scope.state === "state-blue") ? "state-red" : "state-blue";
    }
  });

HTML

<div ng-controller="TestController">
  <div ng-class="state">
    Some label
  </div>
  <input type="button" ng-click="click()" value="Click me">
</div>

但是还有很多使用 ng-class 的方法，请在此处阅读更多信息:https://docs.angularjs.org/api/ng/directive/ngClass