AngularJS：ngClassは、httpリクエストの後に更新されていない

Question

私は、次のコードを持っている：

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

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

<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>

問題は、私は、ブラウザを開いて、ページをロードする際、ngClassディレクティブを得るということですuserLanguage（null）の初期値で、リクエスト（data.userLang）からの値ではないため、クラス "buttom_selected"は適用されません。私はすでにそれをデバッグしていますが、値は戻ってきていますが、ページをリロードするとngClassだけが更新されます。奇妙なことは、新しいタブを開くと正常に動作しますが、ブラウザを閉じて開いてアプリケーションにアクセスすると、ngClassはNavigationServiceコールバックによって行われた変更を無視します。

私は$ scopeを試しましたが、$ apply（）は$ digestがすでに進行中であると言います。

Answer 1

文字列の代わりにオブジェクトを使用してみると分かりません。

$scope.userLanguage = {title: null}; 

それは、このような最小限の例を作成し、間違っているかを理解しようとし、その後動作しない場合：

<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