提问人：user3758745 提问时间：2/1/2020 最后编辑：georgeawguser3758745 更新时间：2/2/2020 访问量：640
AngularJS 为什么这个控制器变量没有在UI中得到更新？
AngularJS Why is this controller variable not getting updated in the UI?
问：
我有一个使用 StompJS 的控制器来订阅一个 url（后端是 Spring Java），该 url 每 5 秒返回一个交替的字符串“list”和“box”。我想在 StompJS 收到一些数据时更新我的 UI 元素，但我无法更新 UI 元素。我已经用 a 测试了相同的逻辑，并且 UI 正在更新，因此它一定与回调函数的工作方式有关。谁能看到UI不更新的原因是什么？$timeout
我有这些简单的UI元素：
<input ng-model="ctrl.uniqueId"/>
<input ng-model="test"/>
ctrl.uniqueId用于验证实际控制器实例是否正在更新。出于某种原因，每次只有 1 个控制器进行 5 个不同的订阅。如果有人能帮忙，那也很棒，但我怀疑你能否得到很多信息，除非你看到我所有的代码设置。
无论如何，在我的控制器中（尝试了 self.test 但它不起作用，所以我尝试使用 $scope.test 看看它是否有所作为）：
self.uniqueId = window.performance.now();
$scope.test = 'list';
// the UI will be updated to dummy after 3 seconds.
$timeout(function() {
$scope.test="dummy";
}, 3000);
// the UI will not update.
var callBackFn = function(progress) {
$scope.test = progress;
console.log(self.uniqueId + ": " + $scope.test);
};
// the server returns alternating data (list and box) every 5 seconds
MyService.subscribeForUpdate('/topic/progressResults', callBackFn);
如果这很重要，这是我的 StompJS 服务代码：
self.subscribeForUpdate = function(channelUrl, callBackFn) {
self.socket.stomp.connect({}, function() {
self.socket.subscription = self.socket.stomp.subscribe(channelUrl,
function (result) {
//return angular.fromJson(result.body);
callBackFn(result.body);
return result.body;
}
);
});
};
结果如下：console.log
1831.255000026431: list
1831.255000026431: box
额外：是否可以在没有类似于 Promise 的回调函数的情况下获取返回数据？
答：
1赞
Bill P
2/1/2020
#1
这是一个非常常见的问题，当第 3 方库（超出 angular 环境）与 angularjs 一起使用时就会发生。在这种情况下，您需要使用以下命令手动触发摘要循环：
$scope.$apply()
之后，所有角度绑定都将被更新。使用 $timeout（即使没有 timeValue）具有相同的结果，因为它也会触发$apply()
评论
0赞
user3758745
2/4/2020
谢谢。这两个答案都是正确的，并且基于您首先发布的时间戳。由于示例更详细，我选择了另一个答案是正确的。我衷心感谢您的帮助。
0赞
Bill P
2/4/2020
没关系，没问题！
2赞
georgeawg
2/2/2020
#2
请务必使用：$apply
app.service("myService", function($rootScope) {
var self = this;
self.subscribeForUpdate = function(channelUrl, callBackFn) {
self.socket.stomp.connect({}, function() {
self.socket.subscription = self.socket.stomp.subscribe(channelUrl,
function (result) {
//return angular.fromJson(result.body);
$rootScope.$apply(function() {
callBackFn(result.body);
});
return result.body;
}
);
});
};
})
AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这会将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能从 AngularJS 数据绑定、异常处理、属性监视等中受益。您还可以使用 $apply（） 从 JavaScript 输入 AngularJS 执行上下文。
请记住，在大多数地方（控制器、服务），处理事件的指令已经为您调用了$apply。只有在实现自定义事件回调或使用第三方库回调时，才需要显式调用 $apply。
有关更多信息，请参阅 。
评论