AngularJS内部的调用函数陷入无限循环

  • Z时代
  • 2024-01-10
  • 分类：问答

我是AngularJS的新手，我正在构建一个示例应用程序。我想在网页上显示Google

Maps响应的结果。在这里，我传递了示例值，但是页面进入循环并给出此错误：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调用，该调用再次

触发摘要循环（在解析/拒绝和每个promise链之后）， 并获得插值表达式再次评估 以稳定视图

。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
    });

以上是 AngularJS内部的调用函数陷入无限循环 的全部内容， 来源链接： utcz.com/qa/402252.html

回到顶部