angularjs $scope.$apply() gives this error: Error: [$rootScope:inprog]

问题:

I'm trying to update some texts on a page that is part of $scope. But I keep getting this error:

Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply][1] at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450 at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:101:443) at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:301) at h.$scope.changeLang (http://treenovum.es/xlsmedical/js/medical-app.js:80:16) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:169:382 at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:390 at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:40) at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:318) at HTMLAnchorElement. (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:372)  

Obviously I'm doing something wrong. :) Any ideas of how I can fix this? I want the page to update to the new variables in the scope.

This is the code I'm using for updating:

medicalApp.controller('MainCtrl', function($scope, $cookies, getTranslation) {     getTranslation.get(function(data){         $scope.translation = data;     });      $scope.changeLang = function (lang) {         console.log(lang);         $cookies.lang = lang;         $scope.$apply(function(){             getTranslation.get(function(data){                 $scope.translation = data;                 console.log(JSON.stringify($scope.translation));             });         });     }; }); 

the html:

     ...             
                 
                     DE |                      FR
             
{{ translation.text }}
    
I'm also using ngRoute with separate controllers for each page I load, if that has anything todo with it?
     
回答1:
 
You are using $scope.$apply(...) inside the function changeLang so you are getting the common 'already in a digest' error. You don't need to put the call to getTranslation inside a $scope.$apply(...) block because ng-click already has you taken care of. Yank that out and it should just work. Also, I'd recommend running with a non-minified version of angular for dev so you can see better errors in your console. 
     


回答2:
 
If your template don't change after changing models and you need using $scope.$apply, You can use $scope.$applyAsync instead of this.
  
https://github.com/angular-ui/ui-codemirror/issues/73
     


回答3:
 
$evalAsync works great:
  
$scope.$evalAsync(function() {     // Code here }); 
  
Or simply:
  
$scope.$evalAsync(); 
  
See: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync
     


 
文章来源: angularjs $scope.$apply() gives this error: Error: [$rootScope:inprog]