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

angular.js: model update doesn't trigger view update

本文关键字：更新 视图 模型 Angular js      更新时间：2023-09-26

我目前正在开发一个基于web的twitter客户端，因此我使用了angular.js, node.js和socket.io。我通过套接字推送新的tweet。IO到我的客户端，其中服务等待新的tweet。当一条新的tweet到达时，服务通过$broadcast发送一个事件。

控制器中的

是一个事件监听器，传入的tweet将在一个单独的函数中处理。这个函数只是将新推文推送到我的推文作用域中。

现在，我的问题列表，我的视图没有更新，但我可以看到我的范围在增长。也许你们有人知道怎么解决这个问题?

另外我的代码:

服务:

(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

在addTweet中添加下面一行代码，问题就解决了

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

我更喜欢使用$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);
        });
    };
    //...
});
相关文章：