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进度条不随控制器更改而更新

1 个答案: