Question

这是我第一次尝试使用Angular.js执行某些操作（流程教程除外）。我开始使用来自http://www.w3schools.com/angular/angular_application.asp的骨架应用程序。我已经为我想要做的事情做了一些调整，这只是从我的REST API中显示GET方法的结果。所以我在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;});
    };
});

我有这个myApp.js文件：

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

但它不起作用我在我的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

过了一会儿我也得到了这个错误：

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

更新：这是我的看法......我想：

<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>

我做错了什么？

Answer 1

我说问题是getHosts()执行每个摘要周期。当HTTP请求解析时，它会触发另一个摘要周期，从而导致无限循环。

在您的控制器中尝试此操作

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

并在您的模板中

<p>hosts: <span ng-bind="hosts"></span></p>

Answer 2

看起来您正在更改getHosts()函数中的模型，该函数绑定到视图。

首次加载页面时，系统会调用getHosts()，然后调用您的API并使用结果更新$scope.hosts。因为$ scope.hosts已更新，它会触发一个新的渲染，进行另一个API调用，从而产生一个循环（因此达到＆＃39; 10 $ digest（）迭代错误）。

您的视图中似乎没有使用$scope.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

问题出在这里

<p>Number of characters left: <span ng-bind="left()"></span></p>
<p>hosts: <span ng-bind="getHosts()"></span></p>

ng-bind =“expression”等于{{expression}}，你不能把表达式等于函数。

我建议在textarea标签中添加ng-change read about it here，并将其等于计算左边的函数，并将getHost添加为以下内容：

<textarea ng-model="message"  ng-change="refresh()" cols="40" rows="10"></textarea>
<p>Number of characters left: {{left}}</p>
<p>hosts: {{hosts}}</p>

并在控制器中：

$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 个答案: