angularjs/signalR bootstrap 进度条未随控制器更改而更新

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);
    });
};

angularjs/signalR bootstrap 进度条未随控制器更改而更新

angularjs/signalR bootstrap progressbar not updating with controller changes

javascript

angularjs

signalr

angular-ui-bootstrap