Why am I getting this error when I try and access the $http var?
Question
This is the first time I have tried to do something, other than flow tutorials, with Angular.js. I am starting off with the skeleton app from http://www.w3schools.com/angular/angular_application.asp . I have tweeked things a bit for what I want to do, which is simply display the result of a GET method from my REST API. So I have this in myAppCtrl.js:
app.controller("myAppCtrl", function($scope,$http) {
$scope.message = "";
$scope.hosts = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
$scope.getHosts = function() {
$http.get("http://172.17.0.5:3000/user").success(function(response) {$scope.hosts = response.records;});
};
});
And I have this myApp.js file:
var app = angular.module("myApp", []);
But it is not working I get these errors in my crome javascript console:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.14/$rootScope/infdig?p0=10&p1=%5B%5D
at angular.js:63
at Scope.$digest (angular.js:14281)
at Scope.$apply (angular.js:14506)
at bootstrapApply (angular.js:1448)
at Object.invoke (angular.js:4185)
at doBootstrap (angular.js:1446)
at bootstrap (angular.js:1466)
at angularInit (angular.js:1360)
at angular.js:26176
at HTMLDocument.trigger (angular.js:2744)(anonymous function) @ angular.js:11607(anonymous function) @ angular.js:8557Scope.$apply @ angular.js:14508bootstrapApply @ angular.js:1448invoke @ angular.js:4185doBootstrap @ angular.js:1446bootstrap @ angular.js:1466angularInit @ angular.js:1360(anonymous function) @ angular.js:26176trigger @ angular.js:2744eventHandler @ angular.js:3014
angular.js:63 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.14/$rootScope/infdig?p0=10&p1=%5B%5D
Then after a while I get this error too:
GET http://172.17.0.5:3000/user net::ERR_CONNECTION_TIMED_OUT(anonymous function) @ angular.js:9827sendReq @ angular.js:9628serverRequest @ angular.js:9344processQueue @ angular.js:13189(anonymous function) @ angular.js:13205Scope.$eval @ angular.js:14401Scope.$digest @ angular.js:14217Scope.$apply @ angular.js:14506bootstrapApply @ angular.js:1448invoke @ angular.js:4185doBootstrap @ angular.js:1446bootstrap @ angular.js:1466angularInit @ angular.js:1360(anonymous function) @ angular.js:26176trigger @ angular.js:2744eventHandler @ angular.js:3014
angular.js:11607 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.14/$rootScope/infdig?p0=10&p1=%5B%5D
at angular.js:63
at Scope.$digest (angular.js:14281)
at Scope.$apply (angular.js:14506)
at done (angular.js:9659)
at completeRequest (angular.js:9849)
at XMLHttpRequest.requestError (angular.js:9800)(anonymous function) @ angular.js:11607(anonymous function) @ angular.js:8557Scope.$apply @ angular.js:14508done @ angular.js:9659completeRequest @ angular.js:9849requestError @ angular.js:9800
UPDATE: This is my view ... I think:
<html ng-app="myApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<!-- switch back to angular.min.js after debigging -->
<body>
<div ng-controller="myAppCtrl">
<h2>My Note</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
<p>hosts: <span ng-bind="getHosts()"></span></p>
</div>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
</body>
</html>
What am I doing wrong?
3 answers
solution1
1 ACCPTED 2015-10-28 02:59:30
I'd say the problem is that getHosts() executes each digest cycle. When the HTTP request resolves, it triggers another digest cycle thus causing an infinite loop.
Try this instead in your controller
$scope.message = "";
$scope.hosts = "";
// etc, no need for a getHosts function
$http.get("http://172.17.0.5:3000/user").then(function(response) {
$scope.hosts = response.data.records;
});
and in your template
<p>hosts: <span ng-bind="hosts"></span></p>
solution2
1 2015-10-28 03:12:31
It looks like you are changing the model within your getHosts() function which is binded to the view.
When you first load the page, getHosts() is called which then makes a call to your API and updates $scope.hosts with the result. Because $scope.hosts is updated, it triggers a new render which makes another API call, resulting in a loop (hence the '10 $digest() iterations reached' error).
It doesn't look like you are using $scope.hosts in your view.
So first replace ng-bind="getHosts()" with ng-bind="hosts" , then in your controller add the following:
$http.get("http://172.17.0.5:3000/user").success(function(response) {
$scope.hosts = response.records;
});
solution3
1 2015-10-28 03:56:04
The problem is here
<p>Number of characters left: <span ng-bind="left()"></span></p>
<p>hosts: <span ng-bind="getHosts()"></span></p>
the ng-bind="expression" is equal to {{expression}}, and you can NOT put the expression equal to a function.
I recommend to add ng-change read about it here in textarea tag and put it equal to a function that calculate the left, and also getHost like the following:
<textarea ng-model="message" ng-change="refresh()" cols="40" rows="10"></textarea>
<p>Number of characters left: {{left}}</p>
<p>hosts: {{hosts}}</p>
and in controller:
$scope.refresh = function() {
$scope.left = 100 - $scope.message.length;
$http.get("http://172.17.0.5:3000/user").success(function(response) {$scope.hosts = response.records;});
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.