angular.js: cập nhật mô hình không kích hoạt cập nhật chế độ xem

Question

Tôi hiện đang làm việc trên một ứng dụng khách dựa trên web twitter và do đó tôi đã sử dụng angular.js, node.js và socket.io. tôi đẩy tweets mới qua socket.io cho khách hàng của tôi, nơi một dịch vụ chờ các tweet mới. khi một tweet mới đến, dịch vụ gửi một sự kiện qua chương trình phát sóng $.

trong bộ điều khiển của tôi là trình xử lý sự kiện, trong đó các tweet đến được xử lý trong một chức năng riêng biệt. chức năng này chỉ đơn giản là đẩy tweet mới trong phạm vi tweet của tôi.

bây giờ, vấn đề của tôi ist, rằng chế độ xem của tôi không cập nhật nhưng tôi có thể thấy phạm vi phát triển của mình. có lẽ một trong các bạn có một ý tưởng, làm thế nào tôi có thể giải quyết vấn đề này?

thêm mã của tôi:

dịch vụ:

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

điều khiển:

(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); 
      } 
     }); 
    }); 
}()); 

toàn bộ dự án là ở đây: https://github.com/hochitom/node-twitter-client

Answer 1

Thêm bên dưới dòng mã trong addTweet và vấn đề sẽ được giải quyết

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

Answer 2

Tôi thích sử dụng $timeout (đừng quên tiêm nó để điều khiển của bạn) thay vì $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); 
     }); 
    }; 

    //... 

});