Question

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

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

这是一个观点。



    <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事件处理的控制器代码：

＆＃13;

    <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>

＆＃13;

p.ImageClass经常变化。视图的更改/更新以正确的方式工作，直到有时会发生旧值和新值的连接。

旧的p.ImageClass值是＆＃34;点状态配置＆＃34;。新的p.ImageClass值为＆＃34;泵状态关闭＆＃34;。

作为一个错误的结果，ImageClass包含连接值：

＆＃13;

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

＆＃13;

我曾试图调用$ 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

Angular JS视图尚未正确更新

1 个答案: