AngularJS: ngClass not being update after http request

Question

I have the following code:

angular.module('myApp')
  .controller('MyCtrl', function ($scope,$rootScope, $filter, $location,$translate,$cookies,NavigationService) {
 
         $scope.appVersion = "";
         $scope.credentials = {};
         $scope.userLanguage = null;
         
         var init = function (){
          authenticate();
          getAppVersion();
         };
         
         var getAppVersion = function () {
          NavigationService.getAppInfo()
                 .then(function (response) {
                     $scope.appVersion = response.data.build.version
                 });
         };
         
         var authenticate = function (credentials, callback) {
             $rootScope.authorities = [];
             $rootScope.currentUser = null;

             NavigationService.doAuthentication(credentials).success(function (data) {
                 $rootScope.authenticated = !!data.name;
                 $rootScope.authorities = data.authorities;
                 $rootScope.currentUser = data.name;
                 $scope.userLanguage = data.userLang;
                 callback && callback();
             }).error(function (response) {
                 $rootScope.authenticated = false;
                 callback && callback();
             });
         };
...

<div ng-show="authenticated" class="btn-group btn-group-xs btn_change_language">
      <button ng-class="{'button_selected': userLanguage == 'de'}" class="btn btn-default" 
              ng-click="changeLanguage('de')" translate>
            BTN_GERMAN_LANGUAGE
      </button>
                  
      <button ng-class="{'button_selected': userLanguage == 'en'}"
              class="btn btn-default" ng-click="changeLanguage('en')" translate>
            BTN_ENGLISH_LANGUAGE 
      </button>
</div>

The problem is that when I open the browser and load the page, the ngClass directive get the initial value of userLanguage (null) and not the value that comes from my request (data.userLang), so the class "buttom_selected" is not applied. I`ve already debugged it and the value is comming ok, however the ngClass just update if I reload the page. The strange thing is that, if I open a new tab it works normally, but if I close and open the browser and access the application the ngClass ignores the change done by NavigationService callback.

I`ve tried $scope.$apply() but it says that $digest is already in progress.

you can use $timeout if you face $digest in progress error, as at the end of the timeout $apply is called. See : http://stackoverflow.com/questions/12729122/angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply However the main issue seems to be something else — Kiran Yallabandi, Nov 21 '16 at 18:06
Sounds like you have some other error on your page as the code you have in ng-class looks correct. If you simply output {{userLanguage}} somewhere on your page does it update as expected? — jtsnr, Nov 21 '16 at 18:31
@KiranYallabandi, thanks for your answer. I've tried these solutions, but unfortunately, it not works. — Sandro Augusto Oliveira, Nov 21 '16 at 19:59
@jtsnr Yes, maybe I have other error, but everything seems to be ok. If I put {{userLanguage}} in somewhere on my page, it appears the initial value of the variable, just like in te ngRepeat — Sandro Augusto Oliveira, Nov 21 '16 at 20:04

Gennady Grishkovtsov · Answer 1 · 2016-11-21T20:30:01.417

0

I'm not sure by try use object instead of string.

    $scope.userLanguage = {title: null};

If that does not work then make a minimal example like this and try to understand what is wrong:

    <button
        ng-class="{'active': userLanguage == 'de'}"
        ng-click="userLanguage = 'de'">BTN_GERMAN_LANGUAGE</button>
    <button
        ng-class="{'active': userLanguage == 'en'}"
        ng-click="userLanguage = 'en'">BTN_ENGLISH_LANGUAGE</button>

Example

edited Nov 21 '16 at 20:30

answered Nov 21 '16 at 18:16

Gennady Grishkovtsov

778
8
14

Hi @Gennady, thanks for your answer, but unfortunately it does not worked. – Sandro Augusto Oliveira Nov 21 '16 at 20:04
Hi @Gennady, thanks again. I saw your example, however my scenario is a little bit diferent. When I clink in the buttons it works fine, the problem is when I load the page with a $http call. My variable is not being updated with the values that comes in the callback funtion, when I load the app for the first time. – Sandro Augusto Oliveira Nov 21 '16 at 21:02

AngularJS: ngClass not being update after http request

1 Answers1