從websocket服務器推送消息後更新$ scope變量

Question

我有一個連接到websocket服務器，將消息推送到我的angularJS應用程序。我在服務中收到這些消息，現在我想在gui上公佈這些數據。

angular.module("test", []) 
    .value("DATA", []) 
    .service("WSS", ["$rootScope", "DATA", function ($rootScope, DATA) { 

     //initialise websocket here 

     m_WebSocket.onmessage = function (msg) { 
      $rootScope.$apply(function() { 
       DATA = angular.fromJson(msg.data).slice(); 
      }); 

      console.debug(DATA); //gives me the expected result 
     }; 
    }]) 
    .controller("CTRL", ["$scope", "DATA", function ($scope, DATA) { 
     $scope.data = DATA;//wont update 
    }]); 

所以，據我瞭解角度我認爲它必須這樣工作，但我的數組陣列保持空。我在這裏錯過了什麼？

Answer 1

的問題是，當你將DATA = angular.fromJson(msg.data).slice();它不影響$scope.data = DATA;可言，因爲在服務$scope.data和新DATA陣列沒有連接，它們指向不同的對象。我們說他們之間沒有任何參考。所以它也不會更新。

這很容易解決，如果你只需要改變的對象，而不是完全覆蓋對象引用的財產：

angular.module("test", []) 
    .value("DATA", {values: []}) 
    .service("WSS", ["$rootScope", "DATA", function ($rootScope, DATA) { 

    //initialise websocket here 

    m_WebSocket.onmessage = function (msg) { 
     $rootScope.$apply(function() { 
      DATA.values = angular.fromJson(msg.data).slice(); 
     }); 
    }; 
}]) 

.controller("CTRL", ["$scope", "DATA", function ($scope, DATA) { 
    $scope.data = DATA; 
}]); 

然後在模板像你之前，你會使用data.values，而不是隻是data 。

在這種情況下$scope.data是具有屬性values的對象。當新消息來自服務器時，唯一發生變化的是DATA對象的屬性values。但在控制器$scope.data指向相同的對象，因此Angular將能夠選擇新的數據。