Angular JS 视图未正确更新

Angular JS view hasn't been updated properly

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

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

这是一个视图。 

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre><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>

包含 SignalR 事件处理的控制器代码：

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 经常变化。 Changes/updates 的视图以正确的方式工作，直到有时会出现新旧值的连接。

旧 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 包含更多的子作用域。谁能告诉我挖什么地方以及如何解决这个问题？

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