web-dev-qa-db-fra.com

La vue n'est pas mise à jour dans AngularJS

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 lors d'un rappel d'événement, des idées pour résoudre ce problème?

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

Manette:

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

Vue:

<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 donc qu'en cliquant sur le bouton, la vue est mise à jour correctement, mais lorsque je reçois le message de la chaîne, rien ne se passe, même la fonction add() est appelée

javascriptangularjsdata-bindingangular-services
58
petrov.alex

Il vous manque $scope.$apply().

Chaque fois que vous touchez un élément extérieur au monde Angular world, vous devez appeler $apply, pour notifier Angular. Cela pourrait provenir de:

  • rappel xhr (géré par le service $ http)
  • setTimeout callback (géré par $defer un service)
  • Rappel d'événement DOM (géré par des directives)

Dans votre cas, faites quelque chose comme ceci:

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