Search code examples
data-bindingreloadpage-refreshng-classangularjs-1.5

The Binding Only Updates After Clicking the Element, Though the String in the Controller Has Already Been Updated (Angular 1.5)


I have an ng-class attribute (that I didn't write on my own). It is bound to a string variable in the controller . It looks like: <some-tag ng-class="'indicator_' + $ctrl.stringValue"></some-tag>.

When the window first load - it contain the correct data, but after the string is updated in the controller - the value in the class attribute only updates after I'm clicking the element (the click will open a list, but I don't think it's relevant).

I've read that the first thing to check in these cases, is that the code is surrounded by a $scope.$apply. It is, cause when I try to add it - I get an error saying "$digest already in progress". Looking for $ctrl and ng-class info, I read the AngularJS component doc and this site, that gave me some basic background about these subjects.

The thing is, I couldn't find any examples of ng-class with $ctrl. Maybe it's irrelevant, but maybe not :)

Example for an irrelevant question I found in the subject is: Angular ngClass is not updating my classes even though my condition change as expected. In general, most of the examples I found include curly brackets, which I don't think are relevant in this case, since I'm binding a string (maybe I'm mistaking about it :) ).

I suspect it probably didn't bind it correctly, I just don't know why.


Edit:

After continuing to search the subject, I'm no longer sure it's related to the ng-class (so I edited the title as well). It looks more like a refresh problem.

I'm puzzled as to why the page doesn't refresh, since everywhere I read - they say that the Angular should call the digest function on its own, and I should not interfere.

Edit2:

I'm working with typeScript, and the stringValue is updated via an event from a service. But the string does update - so I'm not sure it is a relevant information to understand the problem, but worth mentioning :)


Solution

  • Problem solved!! :D

    All I had to do, is to add $timeout(0) after updating the string in the controller!

    The explanation: it was a digest problem, and the reason I couldn't use $scope.$apply(), is because I was trying to do it directly. I needed to do a safe apply, which means - first make sure there's no digest on that scope, and then run apply.

    Turns out that an easy way to do it, is to use $timeout(0).