Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在AngularJS中调用函数是无止境的循环_Javascript_Angularjs - Fatal编程技术网

Javascript 在AngularJS中调用函数是无止境的循环

Javascript 在AngularJS中调用函数是无止境的循环,javascript,angularjs,Javascript,Angularjs,我是AngularJS的新手,我正在构建一个示例应用程序。我想在我的网页上显示谷歌地图响应的结果。这里我传递了示例值,但是页面在循环中给出了以下错误:error:[$rootScope:infdig]10$digest()迭代次数已达到。流产 var app = angular.module('myApp', ['ui.bootstrap']); app.controller('myCon', function($scope, $http) { $scope.getAddress = fun

我是AngularJS的新手,我正在构建一个示例应用程序。我想在我的网页上显示谷歌地图响应的结果。这里我传递了示例值,但是页面在循环中给出了以下错误:
error:[$rootScope:infdig]10$digest()迭代次数已达到。流产

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>

角度演示
{{getAddress('渥太华')}

在插值
{{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中的其他信息),然后在内部调用此函数传递该地址,并从googlegreat获取距离信息,从而知道您在线,我刚刚编辑了我的评论以提供更多的描述,你能指导我吗?有什么想法吗?@Chitresh为什么要通过ng bind或{{}将其放在视图上,只需在控制器上执行即可。我的意思是调用函数