angular.js: aktualizacja modelu nie wyzwala aktualizacji widoku

Question

Aktualnie pracuję nad internetowym klientem Twitter i dlatego użyłem angular.js, node.js i socket.io. Przesyłam nowe tweety przez socket.io do mojego klienta, gdzie usługa czeka na nowe tweety. po nadejściu nowego tweeta usługa wysyła zdarzenie za pośrednictwem transmisji $.

w moim kontrolerze jest detektor zdarzeń, w którym przychodzące wiadomości są przetwarzane w oddzielnej funkcji. ta funkcja po prostu popycha nowy tweet w moim zasięgu tweet.

Mój problem polega na tym, że mój widok nie aktualizuje się, ale widzę, że mój zakres rośnie. może jeden z was ma pomysł, jak mogę to rozwiązać?

dodatkowo mój kod:

usługa:

(function() { 
    app.factory('Push', ['$rootScope', function ($rootScope) { 
     socket.on('new-tweet', function (msg) { 
      $rootScope.$broadcast('new-tweet', msg); 
     }); 
    }]); 
}()); 

kontroler:

(function() { 
    app.controller("StreamCtrl", function StreamCtrl ($scope, $rootScope, $http, Push) { 
     $scope.tweets = []; 

     $http 
      .get('/stream') 
      .then(function (res) { 
       $scope.tweets = res.data; 
      }); 

     $scope.addTweet = function (data) { 
      $scope.tweets.push(data); 
      console.log($scope.tweets); 
     }; 

     $rootScope.$on('new-tweet', function (event, data) { 
      if (!data.friends) { 
       $scope.addTweet(data); 
      } 
     }); 
    }); 
}()); 

cały projekt jest tutaj: https://github.com/hochitom/node-twitter-client

Answer 1

Dodawanie poniżej linii kodu w addTweet a problem zostałby rozwiązany

$scope.addTweet = function (data) { 
      $scope.tweets.push(data); 
      $scope.$apply(); 
      console.log($scope.tweets); 
     }; 

Answer 2

wolę używać $timeout (nie zapomnij, aby wstrzyknąć go do kontrolera) zamiast $apply:

app.controller("StreamCtrl", function StreamCtrl ($scope, $timeout $rootScope, $http, Push) { 

    //... 

    $scope.addTweet = function (data) { 
     $timeout(function() { 
      $scope.tweets.push(data); 
      console.log($scope.tweets); 
     }); 
    }; 

    //... 

});