funciones example eventos entre controladores comunicacion javascript angularjs data-binding angular-services

javascript - example - funciones en angularjs



La vista no se actualiza en AngularJS (1)

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


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