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

徘徊边缘 提交于 2019-12-18 01:52:11

问题


i'm currently working on a web based twitter client and therefore i used angular.js, node.js and socket.io. i push new tweets via socket.io to my client, where a service waits for new tweets. when a new tweet arrives, the service send an event via $broadcast.

in my controller is a event listener, where incoming tweets are being processed in an seperate function. this function simply pushes the new tweet in my tweet scope.

now, my problem ist, that my view is not updating but i can see my scope growing. maybe one of you have an idea, how i can solve this?

additionally my code:

service:

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

controller:

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

the whole project is here: https://github.com/hochitom/node-twitter-client


回答1:


Adding below line of code in addTweet and the problem would be solved

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



回答2:


I prefer to use $timeout (don't forget to inject it to your controller) instead of $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);
        });
    };

    //...

});


来源:https://stackoverflow.com/questions/16185753/angular-js-model-update-doesnt-trigger-view-update

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!