javascript - example - funciones en angularjs

La vista no se actualiza en AngularJS

Question

La actualización de la propiedad del modelo no tiene ningún efecto en la vista al actualizar el modelo en la devolución de llamada de eventos, ¿alguna idea para solucionar esto?

Este es mi servicio:

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() se agregó dinámicamente en el controlador.

Controlador:

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

Ver:

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

Entonces, el problema es que al hacer clic en el botón se actualiza la vista correctamente, pero cuando recibo el mensaje del Canal no sucede nada, incluso se llama a la función add()

Answer 1

Te falta $scope.$apply() .

Cada vez que toca algo desde fuera del mundo angular, debe llamar $apply para notificar a Angular. Eso podría ser de:

• xhr callback (manejado por el servicio $ http)
• setTimeout llamada setTimeout (manejado por el servicio $defer )
• Devolución de llamada de evento DOM (manejado por directivas)

En tu caso, haz algo como esto:

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