javascript - angularjs/signalR Bootstrap 进度条不随 Controller 更改而更新

Question

我有一个 UI Bootstrap 进度条，我正在尝试连接到来自 SignalR 中心的消息。这个想法是服务器端集线器向我发送反射(reflect)在进度条中的进度百分比。我遇到的问题是我看到消息从服务器进入浏览器，但进度条没有更新。我在进度条之前创建了一个虚拟 div，以确保从服务器传入一些值。

这是我的标记:

<div id="dummybar" style="border: #000 1px solid; width:300px;"></div>
<progressbar animate="true" value="vm.progressValue">{{vm.progressValue}}</progressbar>

在我的 Controller 中:

var vm = this;
vm.progressValue = 55;  // test value to start

var hub = $.connection.progressHub;

hub.client.updateGaugeBar = function(percentage) {
            vm.progressValue = Number(percentage);
            log('Progress: ' + vm.progressValue + '%', null, false);
            $("#bar").html(vm.progressValue);
};

我看到 #dummybar 的 html 获得了实时更新，所以 hub 配置正确，它证明 vm.progressValue 在应该的时候是正确的。

但为什么进度条没有得到这些更新呢？它停留在初始渲染的 55%。

感谢您的建议!科里。

Answer 1

通常，当 Angular 完全控制回调时，它会参与 digest cycle。 .摘要循环意味着对模型的任何更改都会自动传播到所有观察者 - 例如，您在 HTML 中的任何绑定(bind)。指令和诸如 $http 和 $resource 之类的东西就是这种情况。

但是，由于您使用的是 SignalR，而 Angular 无法控制回调，因此您需要手动调用摘要循环。

您可以使用 $apply 执行此操作范围的方法。你没有在代码中显示你的范围，但像这样的东西应该可以解决问题:

hub.client.updateGaugeBar = function(percentage) {
    $scope.$apply(function() {
        vm.progressValue = Number(percentage);
    });
};