Widok nie jest aktualizowany w AngularJS

Question

Aktualizacja właściwości modelu nie ma wpływu na widok podczas aktualizowania modelu w wywołaniu zwrotnym zdarzenia, wszelkie pomysły, aby to naprawić?

To jest mój serwis:

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() funkcja została dodana dynamicznie w kontrolerze.

Kontroler:

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']; 

Widok:

<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> 

Więc problem jest, że kliknięcie przycisku aktualizuje widok poprawnie, ale kiedy pojawia się komunikat z nothings Normandzkich dzieje, nawet add() funkcja nazywa się

Answer 1

Brakuje $scope.$apply().

Kiedykolwiek dotkniesz cokolwiek spoza świata Angular, musisz zadzwonić pod numer $apply, aby powiadomić Angular. To może być z:

• XHR zwrotnego (obsługiwane przez serwis $ HTTP)
• setTimeout zwrotnego (obsługiwane przez $defer usługi)
zwrotnego
• DOM zdarzenia (obsługiwane przez dyrektyw)

w twojej obudowa, zrób coś takiego:

// 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]); 
     }); 
     }; 
    } 
    }; 
});