programing

angular.js: 모델 업데이트가 보기 업데이트를 트리거하지 않습니다.

muds 2023. 10. 28. 08:21
반응형

angular.js: 모델 업데이트가 보기 업데이트를 트리거하지 않습니다.

저는 현재 웹 기반 트위터 클라이언트에서 일하고 있기 때문에 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

addTweet에서 아래 코드 라인을 추가하면 문제가 해결됩니다.

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

컨트롤러에 주입하는 대신 사용하는 것을 더 선호합니다.$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);
        });
    };

    //...

});

언급URL : https://stackoverflow.com/questions/16185753/angular-js-model-update-doesnt-trigger-view-update

반응형