angularjs/signalR 引导进度条不随控制器更改而更新

Question

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

这是我的标记：

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

在我的控制器中：

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 得到实时更新，因此集线器配置正确，它证明 vm.progressValue 在应该正确的时候是正确的。

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

感谢您的任何建议！ 科里。

Answer 1

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

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

您可以使用作用域的$apply 方法来执行此操作。您没有在代码中显示您的范围，但这样的事情应该可以解决问题：

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