AngularJS控制器的變量未更新

Question

我有以下代碼的問題。我有prices工廠，它返回包含由websocket從服務器收到的價格的對象。在點擊按鈕Create之後發送價格。問題是main.prices變量根本沒有更新。我可以通過Check按鈕檢查一切，這證實了這一點。 Prices.data已更新，但this.prices不是，但它指的是同一個對象，所以我認爲它也應該更新。你有什麼想法，爲什麼下面不能按預期工作？

angular.module('myApp', ['ngWebSocket']) 

    .factory('ws', ['$websocket', function($websocket){ 
     var url = 'ws://localhost/websocket'; 
     var ws = $websocket(url);   
     return ws; 
    }]) 

    .factory('prices', ['ws', function(ws){ 
     var prices = { 
      data: [], 
      clear: function(){ 
       this.data = []; 
      }, 
      create: function(){ 
       ws.send('send') 
      } 
     } 

     ws.onMessage(function(message){ 
      message = JSON.parse(message.data); 
      var type = message.type; 

      if (type == 'new prices'){    
       prices.data = message.data; 
      } 
     }); 

     return prices; 
    }]) 

    .controller('main', ['prices', function(prices){ 
     this.prices = prices.data; 

     this.check = function(){ 
      console.log('works ', prices.data); 
      console.log('not works ', this.prices); 
     }; 

     this.create = function(){ 
      prices.create(); 
     }; 

     this.stop = function(){ 
      prices.clear(); 
     }; 
    }]); 

<div ng-controller="main as main"> 
    {{ main.prices }} 
    <button ng-click="main.create()">Create</button> 
    <button ng-click="main.stop()">Stop</button> 
    <button ng-click="main.check()">Check</button> 
</div> 

Answer 1

有你貼（在撥弄工作，所以我可以幫返工）有很多的代碼問題...

第一個變化：

if (type == 'new prices'){    
    prices.data = message.data; 
} 

要：

if (type == 'new prices'){ 
    prices.data.length = 0;    
    prices.data.push.apply(prices.data,message.data) ;//copy all items to the array. 
} 

---

從可讀性/ maintaina bility的觀點你應該只使用this.prices vs this.prices.data。把它們映射到其他變量，只要使用價格，這是令人困惑的。另外請注意，我已更新它以不斷使用「that」以避免任何類型的上下文問題this問題。

.controller('main', ['prices', function(prices){ 
    var that = this; 
    that.prices = prices; 

    that.check = check; 
    that.create = create; 
    that.stop = stop; 

    function check(){ 
     console.log('works ', that.prices.data); 
     console.log('not works ', that.prices); 
    } 

    function create(){ 
     that.prices.create(); 
    } 
    function stop(){ 
     that.prices.clear(); 
    } 
}]); 

Answer 2

要添加到以前的響應，你也有一個問題，在明確的（）：

var prices = { 
    ... 
    clear: function(){ 
     this.data = []; 
    }, 
    ... 
} 

當你做了明確的與this.data = []你實際上是在創建一個新的空數組存儲在this.data prop中，並且由於這是一個NEW數組，所以主控制器上的引用 - > this.prices = prices.data;仍然指向舊的。如果你需要刪除數組中的元素，只需使用this.data.length = 0，如Nix指出的那樣。這將保持所有引用同步，因爲您正在重新使用原始數組