current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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);
    });
};
share|improve this answer
    
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? – cardinalPilot Feb 22 at 14:32
    
I tried adding an $scope.$apply() and $scope.$apply(function(){ vm.progressValue = percentage;}) - still does not update the progress bar unfortunately. – cardinalPilot Feb 22 at 14:57
    
Solved. From Dean's suggestion, I had to inject $scope into the controller. Thanks for pointing me in the right direction. – cardinalPilot Feb 22 at 15:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.