我是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>
插值{{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
});