Die Ansicht wird in AngularJS nicht aktualisiert

Aktualisierung der Modell-Eigenschaft hat keine Auswirkungen auf die Ansicht, wenn die Aktualisierung der Modell-in Ereignis-Rückruf, irgendwelche Ideen, zu beheben?

Dies ist mein 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() Funktion wurde Hinzugefügt, die dynamisch im controller.

Controller:

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

Anzeigen:

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

Also das problem ist, dass ein Klick auf die Schaltfläche aktualisiert die Ansicht richtig, aber wenn ich die Meldung aus dem Kanal nichts passiert, auch die add() Funktion wird aufgerufen,

InformationsquelleAutor der Frage petrov.alex | 2012-04-16

  1. 127

    Ihnen fehlt $scope.$apply().

    Wann immer Sie etwas berührt, die von außerhalb der Eckigen Welt, die Sie anrufen $apply informieren Eckig. Das könnte aus:

    • xhr-callback (abgewickelt von der $http-service)
    • setTimeout callback (bearbeitet von $defer service)
    • DOM-Ereignis-Rückruf (bearbeitet von Richtlinien)

    In deinem Fall, so etwas tun:

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

    InformationsquelleAutor der Antwort Vojta

Schreibe einen Kommentar