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

I am 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.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:372) 

Obviously I'm doing something wrong. :) Any ideas on how I can fix this? I want the page to be updated to new variables in the area.

This is the code I use to update:

 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)); }); }); }; }); 

html:

 <body ng-controller="MainCtrl"> ... <div class="header-lang col-xs-4"> <p> <a href="#" ng-click="changeLang('de')">DE</a> | <a href="#" ng-click="changeLang('fr')">FR</a></p> <div>{{ translation.text }}</div> <---- Example variable I want updated. ... 

I also use ngRoute with separate controllers for each loaded page, if it has something with it?

+6
source share
3 answers

You use $scope.$apply(...) inside the changeLang function to get a generic "already in digest" error. You do not need to put the getTranslation call in the $ scope. $ Apply (...) because ng-click has already taken care of you. Yankees, and that should work. In addition, I would recommend working with a non-minified version of angular for dev so you can see the best errors in the console.

+8
source

If your template does not change after changing models and you need to use $scope.$apply , you can use $scope.$applyAsync instead.

https://github.com/angular-ui/ui-codemirror/issues/73

+16
source

$ evalAsync works fine:

 $scope.$evalAsync(function() { // Code here }); 

Or simply:

 $scope.$evalAsync(); 

See: https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ evalAsync

0
source

All Articles