2012-04-16 30 views
55
'da güncelleştirilmedi

Model özelliğini güncellemek, olayı geri aramadaki modeli güncelleştirirken görünüm üzerinde hiçbir etkisi yoktur, bunu düzeltecek herhangi bir fikir var mı?Görünüm AngularJS

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() fonksiyon denetleyicisi dinamik eklendi:

Bu

benim hizmettir.

Denetleyici:

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

Görünüm:

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

Yani sorun butonuna tıklayarak düzgün görünümü günceller, ancak Kanal sözler gelen mesajı aldığında bile, add() olur olmasıdır işlev

cevap

126

$scope.$apply() adlı kaynağında eksik bulunuyorsunuz.

Açısal dünyanın dışından herhangi bir şeye dokunduğunuzda, Angular'e bildirmek için $apply numaralı telefonu aramanız gerekir. Yani gelen olabilir: (direktifler tarafından ele) ($ http hizmeti tarafından işlenen)

  • xhr callback'inde
  • setTimeout callback'inde ($defer hizmeti tarafından işlenen)
  • DOM Olayı callback'inde

Reklamlara Bu gibi bir şey yap:

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

Bu yardımcı oldu ve bir kez neden düşündüm d DOM/jQuery olayları durumunda bunu yapmak, bana mantıklı geldi ve bunu kabul edebildim. – duma

+0

Serin. Kök kapsamını enjekte edebileceğini bilmiyordum. – heneryville

+4

"setTimeout" geri aramaları için, '$ timeout' hizmetini kullanın: https://coderwall.com/p/udpmtq – itghisi