angular.js:模型更新不会触发视图更新

hoc*_*tom 24 javascript angularjs angularjs-scope

我目前正在开发一个基于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);
        });
    }]);
}());
Run Code Online (Sandbox Code Playgroud)

控制器:

(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);
            }
        });
    });
}());
Run Code Online (Sandbox Code Playgroud)

整个项目在这里:https://github.com/hochitom/node-twitter-client

Aja*_*wal 48

在addTweet中添加以下代码行,问题就解决了

$scope.addTweet = function (data) {
            $scope.tweets.push(data);
            $scope.$apply();
            console.log($scope.tweets);
        };
Run Code Online (Sandbox Code Playgroud)

  • 谢谢.$ scope.$ apply()帮帮我.只是好奇 - 这是更新视图的正确方法吗?意思是,不应该角度"决定"自己范围已经改变了吗? (6认同)
  • 这是一个很好的问题,http://jimhoskins.com/2012/12/17/angularjs-and-apply.html Jim Hoskins有一个很好的总结,为什么在这种情况下需要`apply`. (3认同)