programing tip

AngularJS에서보기가 업데이트되지 않았습니다.

itbloger 2020. 12. 11. 07:54
반응형

AngularJS에서보기가 업데이트되지 않았습니다.


모델 속성을 업데이트해도 이벤트 콜백에서 모델을 업데이트 할 때 뷰에 영향을주지 않습니다.이 문제를 해결할 아이디어가 있습니까?

이것은 내 서비스입니다.

angular.service('Channel', function() {        
    var channel = null; 

    return {        
        init: function(channelId, clientId) {
            var that = this;        

            channel = new goog.appengine.Channel(channelId);
            var socket = channel.open();

            socket.onmessage = function(msg) {
                var args = eval(msg.data);              
                that.publish(args[0], args[1]);
            };
        }       
    };
});

publish() 기능이 컨트롤러에 동적으로 추가되었습니다.

제어 장치:

App.Controllers.ParticipantsController = function($xhr, $channel) {
    var self = this;

    self.participants = [];     

    // here publish function is added to service
    mediator.installTo($channel); 

    // subscribe was also added with publish        
    $channel.subscribe('+p', function(name) { 
        self.add(name);     
    });                 

    self.add = function(name) {     
        self.participants.push({ name: name });     
    }
};

App.Controllers.ParticipantsController.$inject = ['$xhr', 'Channel'];

전망:

<div ng:controller="App.Controllers.ParticipantsController">      
    <ul>
        <li ng:repeat="participant in participants"><label ng:bind="participant.name"></label></li>
    </ul>

    <button ng:click="add('test')">add</button>
</div>

그래서 문제는 버튼을 클릭하면 뷰가 제대로 업데이트되지만 채널에서 메시지를 받으면 아무 일도 일어나지 않고 add()함수가 호출 된다는 것입니다.


당신은 누락되었습니다 $scope.$apply().

Angular 세계 외부에서 무엇이든 터치 할 때마다을 호출 $apply하여 Angular에 알립니다. 그 출처는 다음과 같습니다.

  • xhr 콜백 ($ http 서비스에서 처리)
  • setTimeout콜백 ( $defer서비스에서 처리 )
  • DOM 이벤트 콜백 (지시문으로 처리)

귀하의 경우 다음과 같이하십시오.

// inject $rootScope and do $apply on it
angular.service('Channel', function($rootScope) {
  // ...
  return {
    init: function(channelId, clientId) {
      // ...
      socket.onmessage = function(msg) {
        $rootScope.$apply(function() {
          that.publish(args[0], args[1]);
        });
      };
    }
  };
});

참고URL : https://stackoverflow.com/questions/10179488/the-view-is-not-updated-in-angularjs

반응형