Javascript 角度无限循环

我在一个网站上工作，你可以搜索一种食物，看看它是水果还是蔬菜，或者两者都不是（因为我很无聊）。我决定使用Angular，尽管我对它很陌生。 我开始出现以下错误：

这可能是，也可能不是确切的措辞或错误，因为页面滞后太多，我无法打开Javascript控制台

这是我的结果视图控制器：

app.controller('resultController', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        $scope.result = $routeParams.query;

        $scope.whatIsIt = function() {
            $http.get('json/foods.json').success(function(data) {
                var lists = JSON.parse(data);
                var itIsA = 'uuggghhhhh';

                if (lists['fruit'].contains($scope.result)) {
                    itIsA = 'fruit';
                } else if (lists['vegetable'].contains($scope.result)) {
                    itIsA = 'vegetable';
                }
            });
        }
    }]);

这是我的应用程序模块：

var app = angular.module('fruitOrNot', [
    'ngRoute'
]);

app.config(['$routeProvider' ,
    function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'layouts/fruit-search.html',
            controller: 'searchController'
        }).when('/:query', {
            templateUrl: 'layouts/result.html',
            controller: 'resultController'
        });
    }]);

以下是layouts/result.html：

<h1>{{ result }}</h1>
<p>{{ result }} is a {{ whatIsIt() }}</p>

{{result}
{{result}}是一个{{whatIsIt（）}

因此，我想知道是什么导致了

$digest

循环错误，或者如何找出原因，因为我无法使用控制台。谢谢

---

整个项目也在Github上。

您遇到的问题是在作用域上设置了一个字段，该字段隐式调用

$digest

，并再次布局模板。但是，布局模板会再次发出http请求，然后更改作用域，该作用域调用$digest。这就是无限循环

可以通过确保在模板布局期间不会触发http请求来避免这种情况

实现应用程序的一种更为正确的方法是将GET请求提取到适当的服务中，然后将服务注入控制器

然后在控制器中进行服务调用，如下所示：

app.controller('resultController', ['$scope', '$routeParams', 'whatsitService',
    function($scope, $routeParams, $http) {
        $scope.result = $routeParams.query;
        whatsitService.doit().then(function(result) {
            $scope.whatsit = result;
        }
    })
;

<h1>{{ result }}</h1>
<p>{{ result }} is a {{ whatsit }}</p>

您的模板如下所示：

app.controller('resultController', ['$scope', '$routeParams', 'whatsitService',
    function($scope, $routeParams, $http) {
        $scope.result = $routeParams.query;
        whatsitService.doit().then(function(result) {
            $scope.whatsit = result;
        }
    })
;

<h1>{{ result }}</h1>
<p>{{ result }} is a {{ whatsit }}</p>

{{result}
{{result}}是一个{{whatsit}

问题在于您试图调用函数并直接发布返回值，而您试图返回的值超出范围。您需要将该值放入范围中

代码段：

app.controller('resultController', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $scope.result = $routeParams.query;
    $scope.itIsA = "";
    $scope.whatIsIt = function() {
        $http.get('json/foods.json').success(function(data) {
            var lists = JSON.parse(data);
            var itIsA = 'uuggghhhhh';

            if (lists['fruit'].contains($scope.result)) {
                $scope.itIsA = 'fruit';
            } else if (lists['vegetable'].contains($scope.result)) {
                $scope.itIsA = 'vegetable';
            }               

        });
    }
}]);

在HTML模板中：

p>{{ result }} is a {{itIsA}}</p>

p>{{result}}是一个{{itIsA}

如果将表达式绑定到无限$digest循环，则在以下情况下可能发生无限$digest循环：

{{{events（）}}

及

$scope.events=function（）{
返回Recording.getEvents（）；
}

但不是在下面的情况下。即使您绑定了

{{events}

$scope.events=Recording.getEvents（）

原因是在第一个角度，假设每个摘要循环中的值都在变化，并且它不断更新它。在第二种情况下，它只是等待承诺。
这是因为在你的角度表达式“
{{{whatIsIt（）}
”中
“
{result}}是一个{whatIsIt（）}
”您正在调用一个函数，该函数在每次调用时返回不同的值，从而导致一个新的摘要循环，该循环反过来调用该函数

我认为应该将
whatIsIt（）
的结果绑定到一个值，然后在模板中使用该值。查看$rootScope/infdig
记录一下样式——您应该将http请求分离成一个服务。它们不应该在控制器中。好的，谢谢，我会这样做。我更新了我的代码以使用服务，我得到了这个错误：`Unknown provider:Whatisitiprovider，这行不是吗：
函数（$scope，$routeParams，$http）{
应该是：
函数（$scope，$routeParams，whatsisService）{
在您的示例中？我们希望您测试的东西能够满足您的想法。