AngularJS $scope Updated, Not The View

Question

I've looked at numerous posts but haven't found one that quite matches up with what I'm looking for yet. I split into multiple controllers to clearly separate functionality into multiple areas. There is a centralized service that contains all data that is passed between the individual controllers and displayed on the screen in different areas. I'm running into an issue with a controller that is further down the line that is grabbing the same data as the others, but the UI isn't updated when the data in the service is manipulated. In each controller I set a scope variable to the object in the service..

$scope.package = SampleService.getPackage();

I then use an ng-repeat to loop over the package, which, contains an array, and could contain a nested array of data to be shown. During the process, data is processed and assigned to these items (within the service, not the controller). If I put the $scope.package variable in a loop, I can see that the variable is getting updated from the service (watching it in the console) but the changes aren't reflected on the screen. In particular, I'm setting several values true/false and depending on their value, several icons would be shown on the screen. The icons never show (hasn't detected the scope variable hasn't changed) until I click something on the screen (assuming this triggers a digest loop). The icons will then show up. However, they change several times based on the status of the task. I have to continue clicking to make the icons change.

Is there something I'm missing? Changes to the structure work perfectly in another area of the page. It's this one area that I can't get to work right. The only difference is that I'm toggling true/false instead of manipulating other areas of the object. Could using angular.copy to set the true/false values help?

I'm kind of at a loss with what to do from here..

Suggestions?

Marko · Accepted Answer · 2014-12-12 18:02:09Z

0

I'm sure there will be better answers, but one thing to try is wrapping your service execution in a $timeout which forces a digest.

$timeout(function() {
    $scope.package = SampleService.getPackage();
});

answered Dec 12, 2014 at 18:02

Marko

72.3k29 gold badges126 silver badges160 bronze badges

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

3 Comments

dferg Over a year ago

Same as above... doesn't seem like a good answer but also doesn't work.

Marko Over a year ago

@dferg if neither of the 2 work then it's not a digest problem. $timeout certainly forces a digest which should make your view update. Without code samples it is hard to know what's going on.

dferg Over a year ago

Understood and agree, that's why its confusing me so much. Wondering if its just not noticing the variable is dirty because of how far down the change is. Its several objects nested several levels down inside of other objects and arrays.

jdotjdot · Accepted Answer · 2014-12-12 19:14:09Z

-1

Sounds like the answer is to trigger the $digest loop: http://www.sitepoint.com/understanding-angulars-apply-digest/

This would result in the following code in your controller:

$scope.$apply(function () {
    $scope.package = SampleService.getPackage();
});

edited Dec 12, 2014 at 19:14

answered Dec 12, 2014 at 18:59

jdotjdot

17.3k15 gold badges71 silver badges119 bronze badges

7 Comments

dferg Over a year ago

I was thinking that this may be the solution but it just seems like there HAS to be something that I'm missing that would make it not update appropriately. Constantly triggering an apply seems wasteful and seems like more of a hacked solution. It may be my only one though.. I'll try it out

jdotjdot Over a year ago

interesting. Have you tried the $timeout solution below? Is is possible then that maybe the issues isn't what you think it is?

dferg Over a year ago

I did try it. It didn't work either. I may try restructuring the stuff a little and changing the way its displayed to see if it helps because the display is 3-4 nested ng-repeats

jdotjdot Over a year ago

Sounds to me like this might be a scoping issue.

Rias Over a year ago

$scope.$apply() won't trigger a digest cycle, if there's already one in progress. It is prefered to use $timeout()to force a digest cycle, as it will not fail with an error, if there is already one in progress.

|

Collectives™ on Stack Overflow

AngularJS $scope Updated, Not The View

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related