AngularJS 中的调用函数进入无限循环 [英] Calling function inside AngularJS goes in endless loop

查看：31 发布时间：2021/11/9 4:25:31 javascript angularjs

本文介绍了AngularJS 中的调用函数进入无限循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 AngularJS 的新手，我正在构建一个示例应用程序.我想在我的网页上显示谷歌地图响应的结果.在这里，我传递了示例值，但页面继续循环并给出以下错误:Error: [$rootScope:infdig] 10 $digest() 迭代达到.中止！

var app = angular.module('myApp', ['ui.bootstrap']);app.controller('myCon', function($scope, $http) {$scope.getAddress = 函数(网址){return $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 页面:

<html lang="en" ng-app="myApp" ng-controller="myCon"><头><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="样式表"><身体><div class="page">{{getAddress('渥太华')}}

</html>

解决方案

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

只需在触发事件时拨打电话，而不确定为什么要这样做.但是，您也可以在控制器实例化时立即在控制器中执行此操作，并将数据作为属性绑定到视图.或者在特定事件发生期间绑定函数 getAddress(url)(由于对为什么从插值中调用 getAddress('ottava') 的有限了解，我无法进一步推荐)

一个例子，在你看来

{{distance.text}}

在控制器中:

 $scope.distance = {};//getAddress定义后直接从控制器调用$scope.getAddress('ottava').then(function(text){$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屋！

查看全文

AngularJS 中的调用函数进入无限循环 [英] Calling function inside AngularJS goes in endless loop

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS 中的调用函数进入无限循环 [英] Calling function inside AngularJS goes in endless loop

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭