angularjs/signalR bootstrap progressbar not updating with controller changes

Question

I have a UI Bootstrap progressbar that I'm trying to hook up to messages from a SignalR hub. The idea is that the server-side hub sends me progress percentages that are reflected in the progress bar. The problem I have is that I see the messages coming into the browser from the server, but the progressbar bar doesn't update. I created a dummy div before the progressbar to ensure something value is coming in from the server.

Here's my markup:

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

And in my 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);
};

I see the html of #dummybar getting live updates, so the hub is configured properly and it proves vm.progressValue is correct when it should be.

But why isn't the progressbar getting those updates as well? It is stuck on 55% from it's initial rendering.

Thanks for any advice! Corey.

Dean Ward · Accepted Answer · 2015-02-21 12:42:09Z

4

Usually when Angular is in full control of a callback it participates in a digest cycle. A digest cycle means that any changes to your models are automatically propagated to all watchers - for example any bindings you have in HTML. This is the case with directives and things like $http and $resource.

However, because you are using SignalR and Angular is not in control of the callback you need to manually invoke a digest cycle.

You do this using the $apply method of a scope. You don't show your scope in the code but something like this should do the trick:

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

edited Feb 21, 2015 at 12:42

answered Feb 20, 2015 at 23:53

Dean Ward

4,7931 gold badge31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pathrider Over a year ago

Thanks! An excellent explanation. If I am not using $scope, but am using a 'Controller as <alias>' notation in ng-controller and the var vm = this' (John Papa style), then how does this change the $scope.$apply statement?

pathrider Over a year ago

I tried adding an $scope.$apply() and $scope.$apply(function(){ vm.progressValue = percentage;}) - still does not update the progress bar unfortunately.

pathrider Over a year ago

Solved. From Dean's suggestion, I had to inject $scope into the controller. Thanks for pointing me in the right direction.

Collectives™ on Stack Overflow

angularjs/signalR bootstrap progressbar not updating with controller changes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related