AngularJS中的调用函数进入无限循环答案

【问题标题】：Calling function inside AngularJS goes in endless loopAngularJS中的调用函数进入无限循环
【发布时间】：2015-02-04 22:23:21
【问题描述】：

我是 AngularJS 的新手，我正在构建一个示例应用程序。我想在我的网页上显示谷歌地图响应的结果。这里我传递了示例值，但是页面循环并给出了这个错误：Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('myCon', function($scope, $http) {

$scope.getAddress = function(url){

  return $http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Toronto+ON&destinations='+url+'&mode=driving').then(function(response){
      return response.rows[0].elements[0].distance.text; 
    });
};

这是 HTML 页面：

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCon">
<head>
    <meta charset="UTF-8">
    <title>Angular Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="js/app.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="page">
        {{getAddress('Ottawa')}}
    </div>
</body>
</html>

【问题讨论】：

以下答案有什么好运气吗？

标签： javascript angularjs

【解决方案1】：

当您在插值{{xxx()}} 中调用函数时，您需要小心。插值运行每个摘要周期，并且您在其中调用一个函数，一切都很好，但随后在函数中您进行$http 调用，再次触发一个摘要周期（在它之后已解决/拒绝并且每个承诺链） 并再次评估插值表达式以稳定视图。 Angular 会继续希望视图在每个摘要周期后保持稳定，但显然不是。 Angular 在内部执行此循环直到最大限制为 10 次（内部设置但可配置，但它不会解决您的问题）并停止尝试稳定显示您在控制台中看到的错误。

只需在触发事件时拨打电话，不知道您究竟为什么要这样做。但是您也可以在控制器实例化时立即在控制器中执行此操作，并将数据作为属性绑定到视图。或者在特定事件发生期间绑定函数getAddress(url)（我不能进一步推荐您为什么从插值中调用getAddress('ottava')）

一个例子，在你看来

{{distance.text}}

在控制器中：

    $scope.distance = {};
    //After getAddress definition call it directly from controller 
    $scope.getAddress('ottava').then(function(text){
       $scope.distance.text = text
    });

【讨论】：

感谢您的回复。对此，我真的非常感激。实际上，我希望在 ng-repeat 标签中使用它。把它想象成点击 http.get 来在一个包含地址信息的对象中加载 json 数据，然后使用 ng-repeat 来显示地址（以及来自 json 的其他信息），然后在内部调用这个函数来传递那个地址并从谷歌获取距离信息
很高兴知道你在线，我刚刚编辑了我的评论以提供更多描述，你能指导我吗？有什么想法吗？
@Chitresh 为什么要通过 ng-bind 或 {{}} 将其放置在视图上，只需在控制器上执行即可。我的意思是调用函数