javascript - component - angular.js: la actualización del modelo no activa la actualización de la vista

ng angular

Question

Actualmente estoy trabajando en un cliente de Twitter basado en web y, por lo tanto, utilicé angular.js, node.js y socket.io. Presiono nuevos tweets a través de socket.io a mi cliente, donde un servicio espera nuevos tweets. cuando llega un nuevo tweet, el servicio envía un evento a través de $ broadcast.

en mi controlador hay un detector de eventos, donde los tweets entrantes se procesan en una función separada. esta función simplemente empuja el nuevo tweet en el alcance de mi tweet.

Ahora, mi problema es que mi vista no se está actualizando, pero puedo ver que mi alcance está creciendo. Tal vez uno de ustedes tenga una idea, ¿cómo puedo resolver esto?

adicionalmente mi código:

Servicio:

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

controlador:

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

El proyecto completo está aquí: https://github.com/hochitom/node-twitter-client

Answer 1

Agregando la siguiente línea de código en addTweet y el problema se resolvería

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

Answer 2

Prefiero usar $timeout (no olvides inyectarlo en tu controlador) en lugar de $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);
        });
    };

    //...

});