当我尝试访问$ http var时，为什么会出现此错误？

Question

This is the first time I have tried to do something, other than flow tutorials, with Angular.js. 这是我第一次尝试使用Angular.js做一些事情，除了流程教程。 I am starting off with the skeleton app from http://www.w3schools.com/angular/angular_application.asp . 我将从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. 我已经为我想要做的事情做了一些调整，这只是从我的REST API中显示GET方法的结果。 So I have this in myAppCtrl.js: 所以我在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: 我有这个myApp.js文件：

var app = angular.module("myApp", []);

But it is not working I get these errors in my crome javascript console: 但它不起作用我在我的crome javascript控制台中得到这些错误：

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? 我究竟做错了什么？

Answer 1

I'd say the problem is that getHosts() executes each digest cycle. 我要说问题是getHosts()执行每个摘要周期。 When the HTTP request resolves, it triggers another digest cycle thus causing an infinite loop. 当HTTP请求解析时，它会触发另一个摘要周期，从而导致无限循环。

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>

Answer 2

It looks like you are changing the model within your getHosts() function which is binded to the view. 看起来您正在更改getHosts()函数中的模型，该函数绑定到视图。

When you first load the page, getHosts() is called which then makes a call to your API and updates $scope.hosts with the result. 首次加载页面时，将调用getHosts() ，然后调用API并使用结果更新$scope.hosts 。 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). 因为$ scope.hosts被更新，它会触发一个新的渲染，它会进行另一个API调用，从而产生一个循环（因此'10 $ digest（）迭代达到'错误）。

It doesn't look like you are using $scope.hosts in your view. 它看起来不像你在视图中使用$scope.hosts 。

So first replace ng-bind="getHosts()" with ng-bind="hosts" , then in your controller add the following: 所以首先用ng-bind="hosts"替换ng-bind="getHosts()" ng-bind="hosts" ，然后在你的控制器中添加以下内容：

$http.get("http://172.17.0.5:3000/user").success(function(response) {
     $scope.hosts = response.records;
});

Answer 3

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. ng-bind =“expression”等于{{expression}}，你不能把表达式等于函数。

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-change 读取，并将其等于计算左边的函数，以及getHost，如下所示：

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

当我尝试访问$ http var时，为什么会出现此错误？

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-10-28 02:59:30

解决方案2
1 2015-10-28 03:12:31

解决方案3
1 2015-10-28 03:56:04

当我尝试访问$ http var时，为什么会出现此错误？

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-10-28 02:59:30

解决方案2 1 2015-10-28 03:12:31

解决方案3 1 2015-10-28 03:56:04

解决方案1
1 已采纳 2015-10-28 02:59:30

解决方案2
1 2015-10-28 03:12:31

解决方案3
1 2015-10-28 03:56:04