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.<anonymous> (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:
<body ng-controller="MainCtrl">
...
<div class="header-lang col-xs-4">
<p>
DE |
FR</p>
<div>{{ translation.text }}</div> <---- Example variable I want updated.
...
I'm also using ngRoute with separate controllers for each page I load, if that has anything todo with it?
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
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.
$evalAsync works great:
$scope.$evalAsync(function() {
// Code here
});
Or simply:
$scope.$evalAsync();
See: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync
Related
I'm getting unexpected End of expression error when I pass nodejs data to to ng-init. I'm confident I'm doing it right however I'm getting the error message above
I call ng-init like so:
<body id="myPage" ng-app="myApp" ng-controller="arrCtrl" ng-init="items = <%- JSON.stringify(myitems) %>">
and the error is here
Unexpected end of expression: items = [{
Thus when I run
{{items}}
It'll display as is.
I also went ahead and declared my module in my script tag just in case like so
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function(){
console.log("Controller loaded");
});
</script>
I looked everywhere and no one seemed to have solved this issue.
<select name="Connection" class="mdl-button" id="dropConnection" onchange="connectionChange()" ></select>
The contents are added automatically from JSON response.Thats working fine.
function connectionChange()
{
var sel = document.getElementById("dropConnection");
var connectionName = sel.options[sel.selectedIndex].text;
$scope.connectionDetail = response.data.message.connectionDetailses.filter(det => det.connectionId === connectionName);
console.log($scope.connectionDetail);
}
after running the page,when I change the dropdown content its showing error
home.html:265 Uncaught ReferenceError: $scope is not defined
at connectionChange (home.html:265) // above javascript code.
at HTMLSelectElement.onchange (VM4122 home.html:139)
home.html:265 Uncaught ReferenceError: $scope is not defined
at connectionChange (home.html:265) // above javascript code.
at HTMLSelectElement.onchange (VM4122 home.html:139)
Looking at this error it can be inferred that you have not injected $scope in your controller. Inject $scope in your controller and it will resolve this error.
Check the link here for knowing how to create a controller in AngularJS properly AngularJS controller
In my application, I am getting this same error (TypeError: "Cannot read property 'activeMenuTab' of undefined") 3 times on browser console, although application is working very well.
Error refers to this line of code in controller:
$scope.$route = $route;
$scope.isSelected = function(menuTab) {
return $route.current.activeMenuTab == menuTab;
};
I call this function from menu in View:
<ul>
<li>...</li>
.
.
.
</ul>
Does anybody know what to do with this error, please? I try my best to solve it, but as I can see, still not enough.
The error tell you that $route.current is undefined, so it canot access the property 'activeMenuTab'. You need to save in your controller scope "activeMenuTab".
Maybe you can take a look at this How to highlight a current menu item?
for a better way?
Just made a simple controller with some injection.
var SimpleProductListController = BaseController.extend({
_notifications:null,
_productsModel:null,
init:function($scope,ProductsModel,$route){
},
defineListeners:function(){
this._super();
},
destroy:function(){
}
})
/...
SimpleProductListController.$inject = ['$scope','ProductsModel','$route'];
The console error points to this:
http://errors.angularjs.org/1.2.16/ng/areq?p0=SimpleProductListController&p1=not%20aNaNunction%2C%20got%20undefined
Argument 'SimpleProductListController' is not aNaNunction, got undefined
How am I supposed to even debug this? I got batarang but it does nothing here.
Basically, Angular is saying that SimpleProductListController is undefined.
When I've gotten that error, it was because I created a controller and tried to inject it into my app but I did not load the file that defines that controller by adding the script tag to my index.html file.
I have the following code: http://jsfiddle.net/LvdcU/3/
I don't understand why I keep getting the following error:
Uncaught ReferenceError: updatetotalorderCals is not defined
I'm sure this has everything to do with my limited js knowledge.
UPDATE:
So the original example error has been resolved, but when applying it to my real-world code, the error returns. I've update jsFiddle with all of the applicable code: http://jsfiddle.net/LvdcU/8/, (probably more than necessary this time) in hopes of getting this working. Thanks!
It's a scope issue. You have the fiddle set to onDomReady. If you view the source of the page created by the fiddle, you will see this:
var VanillaRunOnDomReady = function() {
function updatetotalorderCals() {
alert("It worked!");
}
}
Because your function is being placed within another function, it is not accessible outside of that function. Change it to no wrap (head) and you will see that it works.