AngularJS 为什么这个控制器变量没有在 UI 中更新？

Question

我有一个控制器使用 StompJS 来订阅 url（后端是 Spring Java），return 是一个交替字符串 "list" 和 "box" 每 5 秒。我想在 StompJS 收到一些数据时更新我的 UI 元素，但我无法更新 UI 元素。我用 $timeout 测试了相同的逻辑，并且 UI 正在更新，所以它一定与回调函数的工作方式有关。谁能看出 UI 没有更新的原因是什么？

我有这些简单的 UI 元素：

<input ng-model="ctrl.uniqueId"/>
<input ng-model="test"/>

ctrl.uniqueId是验证实际controller实例是否正在更新。出于某种原因，每次只有 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那样不带回调函数获取return数据？

Answer 1

这是一个非常常见的问题，当第 3 方库（在 angular 环境之外）与 angularjs 一起使用时会发生。在这种情况下，您需要使用以下方法手动触发摘要循环：

$scope.$apply()

之后所有 angular 绑定将被更新。使用 $timeout（即使没有 timeValue）也有相同的结果，因为它也会触发 $apply()

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

有关详细信息，请参阅

AngularJS Developer Guide - Integration with the browser event loop

AngularJS 为什么这个控制器变量没有在 UI 中更新？

AngularJS Why is this controller variable not getting updated in the UI?

callback

model-binding

angularjs

angularjs-scope

stompjs