里面AngularJS调用函数进去死循环 [英] Calling function inside AngularJS goes in endless loop
问题描述
我是新来AngularJS和我是建设一个示例应用程序。我要显示我的网页上的谷歌地图反应的结果。在这里，我通过采样值，但页面的推移一个循环，并给出了这样的错误：错误：[$ rootScope：infdig] 10 $摘要（）迭代到达。中止！
VAR应用= angular.module（'对myApp'，['ui.bootstrap']）;app.controller（'myCon'，函数（$范围，$ HTTP）{$ scope.getAddress =功能（URL）{ 返回$http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Toronto+ON&destinations='+url+'&mode=driving').then(function(response){
返回response.rows [0] .elements [0] .distance.text;
}）;
};
这是HTML页面：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=对myAppNG控制器=myCon＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;角演示＆LT; /标题＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =页＆GT;
{{的getAddress（'渥太华'）}}
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
当你调用插值中的一个函数 {{XXX（）}} ，你必须要小心。插值运行的每个消化周期的和你调用内的一个功能，一切都很好，但随后的函数内你正在一个 $ HTTP 通话这再次触发摘要周期（已经解决后/拒绝和每一个承诺链）的和内插前pression被重新评估的稳定视图的。角只会继续希望视图将保持稳定后，每消化周期，但显然不是。角做这个循环，直到10倍（在内部设置，但配置，虽然它不会解决你的问题）内部的最大限制，并停止试图稳定其显示在您的控制台中看到的错误。
只需拨打电话时，触发一个事件，不知道到底为什么要这么做。但你可以同时做到在控制器时，马上就被实例化和数据绑定财产的观点。或绑定功能的getAddress（URL）在特定事件发生（我不能用，为什么要调用的getAddress有限的知识还建议（'ottava '）从插值）
一个例子，在你看来
{{distance.text}}
在控制器：
$ scope.distance = {};
//定义的getAddress后直接调用它从控制器
$ scope.getAddress（'ottava'），然后（函数（文本）{
$ scope.distance.text =文本
}）;
I am new to AngularJS and I was building a sample app. I want to display the result of Google maps response on my web page. Here I pass the sample value, but the page goes on a loop and gives this error: 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;
});
};
And this is the HTML page :
<!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>
When you invoke a function within interpolation {{xxx()}} you need to be careful. Interpolation runs every digest cycle and you are calling a function within that, All is well, but then within the function you are making an $http call which again triggers a digest cycle (after it has resolved/rejected and every promise chain) and interpolation expression gets evaluated again to stabilize the view. Angular will just go on hoping the view will be stable after every digest cycle, but apparently not. Angular does this loop till an max limit of 10 times (internally set but configurable though it will not solve your problem) internally and stops trying to stabilize displaying the error which you see in your console.
Just make the call when an event is triggered and not sure why exactly you want to do that. But you could as well do it in the controller right away when it is instantiated and bind the data as property to the view. Or bind the function getAddress(url) during a specific event happens (i cant recommend further with the limited knowledge of why you are invoking getAddress('ottava') from the interpolation)
An example, in your view
{{distance.text}}
In the controller:
$scope.distance = {};
//After getAddress definition call it directly from controller
$scope.getAddress('ottava').then(function(text){
$scope.distance.text = text
});
这篇关于里面AngularJS调用函数进去死循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
