angular.js：模型更新不會觸發視圖更新

Question

我目前正在開發一個基於Web的Twitter客戶端，因此我使用了angular.js，node.js和socket.io。 我通過socket.io將新推文推送到我的客戶端，服務等待新的推文。 當一條新的推文到達時，該服務通過$ broadcast發送一個事件。

在我的控制器中是一個事件監聽器，其中傳入的推文正在單獨的功能中處理。 這個函數只是在我的推文范圍內推送新的推文。

現在，我的問題是，我的觀點沒有更新，但我可以看到我的范圍在增長。 也許你們其中一個人有想法，我怎么能解決這個問題？

另外我的代碼：

服務：

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

控制器：

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

整個項目在這里： https ： //github.com/hochitom/node-twitter-client

Answer 1

在addTweet中添加以下代碼行，問題就解決了

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

Answer 2

我更喜歡使用$timeout （不要忘記將它注入你的控制器）而不是$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);
        });
    };

    //...

});