Angular JS視圖尚未正確更新

我在AngularJS中發現了一個與視圖更新錯誤有關的問題。它不時發生。問題是，當模型獲得新值時，視圖不會被新模型值更新，而是舊值附加到新模型值。Angular JS視圖尚未正確更新

在排除故障時，我檢查了模型是否包含正確的值。

這是一個視圖。

含有SignalR事件處理


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

控制器代碼：

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是經常變化的。視圖的更改/更新以正確的方式工作，直到有時會出現舊值和新值的拼接。

舊的p.ImageClass值是「point-state-configure」。新的pImageClass值是「泵狀態關閉」。

由於一個錯誤的結果我有，這裏的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>

我試圖調用$範圍$適用（）和$ evalAsync，但這是無望。這個問題最奇怪的事情是自發發生的。它是$ rootscope包含更多子範圍時的唯一常量條件。任何人都可以告訴挖掘什麼地方以及如何擺脫這個問題？

來源

2016-06-07 Marina

如果使用ng-class =「p.ImageClass」而不是class =「{p.ImageClass}」，它可能會更好。你能發佈更多的控制器代碼嗎？ – disperse

我試過ng-class =「p.ImageClass」，它沒有幫助。控制器代碼已更新。在服務器端一切都很好，客戶端出現問題。 – Marina

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

來源

2016-06-07 16:49:58

Angular JS視圖尚未正確更新

回答

相關問題