Javascript 该视图未在 AngularJS 中更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10179488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The view is not updated in AngularJS
提问by petrov.alex
Updating the model property has no effect on the view when updating the model in event callback, any ideas to fix this?
在事件回调中更新模型时，更新模型属性对视图没有影响，有什么解决方法吗？
This is my 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()function was added dynamically in the controller.
publish()功能是在控制器中动态添加的。
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'];
View:
看法：
<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>
So the problem is that clicking the button updates the view properly, but when I get the message from the Channel nothings happens, even the add()function is called
所以问题是单击按钮会正确更新视图，但是当我从 Channel 获取消息时，什么也没有发生，甚至add()调用了该函数
回答by Vojta
You are missing $scope.$apply().
你不见了$scope.$apply()。
Whenever you touch anything from outside of the Angular world, you need to call $apply, to notify Angular. That might be from:
每当您触摸 Angular 世界之外的任何东西时，您都需要调用$apply, 来通知 Angular。那可能来自：
- xhr callback (handled by $http service)
setTimeoutcallback (handled by$deferservice)- DOM Event callback (handled by directives)
- xhr 回调（由 $http 服务处理）
setTimeout回调（由$defer服务处理）- DOM 事件回调（由指令处理）
In your case, do something like this:
在您的情况下，请执行以下操作：
// 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]);
});
};
}
};
});
