イベントコールバックでモデルを更新する場合、モデルプロパティを更新してもビューに影響はありません。これを修正するアイデアはありますか?
これは私のサービスです:
_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()
関数がコントローラーに動的に追加されました。
コントローラ:
_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'];
_
表示:
_<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>
_
したがって、問題は、ボタンをクリックするとビューが適切に更新されることですが、チャンネルからメッセージを受け取ると何も起こらず、add()
関数も呼び出されます
$scope.$apply()
がありません。
Angular worldの外側から何かに触れるたびに、$apply
、Angularに通知します。からかもしれない:
setTimeout
コールバック($defer
サービス)あなたの場合、次のようなことをしてください:
// 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]);
});
};
}
};
});