La vue n'est pas mise à jour dans AngularJS

Question

La mise à jour de la propriété du modèle n'a aucun effet sur la vue lors de la mise à jour du modèle dans le callback de l'événement, une idée pour corriger cela ?

C'est mon service :

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() a été ajoutée dynamiquement dans le contrôleur.

Contrôleur :

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

    self.participants = [];     

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

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

    self.add = function(name) {     
        self.participants.push({ name: name });     
    }
};
App.Controllers.ParticipantsController.$inject = ['$xhr', 'Channel'];

Voir :

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

Le problème est que si je clique sur le bouton, la vue est correctement mise à jour, mais lorsque je reçois le message de la chaîne, rien ne se passe, même l'indicateur d'état de la chaîne. add() La fonction est appelée

Answer 1

Il vous manque $scope.$apply() .

Chaque fois que vous touchez quelque chose depuis l'extérieur du monde Angular, vous devez appeler $apply, pour notifier Angular. Cela peut venir de :

• callback xhr (géré par le service $http)
• Appel setTimeout (géré par le service $defer)
• Appel d'événement DOM (géré par les directives)

Dans votre cas, faites quelque chose comme ça :

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