当前位置: 首页 > 面试题库 >

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

顾嘉良
2023-03-14
问题内容

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


 类似资料:
  • 如果我想在没有尾字段的情况下实现我的LinkedList add方法,它有什么问题? 下面是类: 编辑:将打印方法更改为:public void print(){Node currNode=head; 我得到的结果是:

  • 我目前正在构建一个动态表单引擎,希望在呈现应答摘要组件时显示redux存储区的结果。我认为最好的方法是在加载answerSummary组件后设置“complete”状态并将其设置为true,但在map函数中这样做不起作用,并抛出无限循环react错误。 代码如下: 编辑:我知道你不能在渲染中设置状态-我这样写是为了尝试和传达我想要做的事情

  • 问题内容: 我用Java 8编写了一个服务器应用程序,并使用Java 1.8.0u25运行它。 它可以在最初的几个小时内正常工作,但是在收到大约5k至10k请求之后,VM进程的线程使用了其中一个CPU的100%。 因此,我尝试让VM进程检查有问题的线程是什么,它显示线程(线程ID为14303 = 0x37df)为“ C2 CompilerThread0”: 使用,线程的堆栈跟踪如下: 每一次我尝试

  • 给定一棵树,其中左和右子树是min堆,但根节点不维护min堆属性。您的代码应该修改根植于node*n的树,使其成为一个最小堆。(这意味着您需要满足min heap属性:节点的值等于它的一个子节点或两个子节点都是可以的,但节点的值不能大于它的任何一个子节点。您不必试图平衡树或使其成为完整的树。) 请建议我缺少什么。我觉得我把它弄得太复杂了。此外,我没有任何其他函数,如swap将二叉树转换为堆MIN。

  • 我正在创建一个应用程序(不在play store中),它在Webview中使用了大量内存,通过使用LeakCanary,我发现了一个修复了几个小内存泄漏的问题。有两个漏洞比其他漏洞更难修复,但也比任何其他漏洞小得多(每两个小时泄漏10-12kb),我不得不暂时保留它们。在让我的应用程序运行一整晚后,我通常会看到大量的日志,比如: 背景部分并发标记扫描GC释放263432(17MB)AllocSpa

  • 问题内容: 我有一些代码,其结构类似于此 问题是它向我吐了一个错误。 解析错误:语法错误,意外的T_LNUMBER,预期的T_VARIABLE或’$’ 有关于如何在bbcode函数的preg_replace内调用embed_video的想法吗? 谢谢! 问题答案: 您可以在上使用“ e”修饰符(请参见模式修饰符) 告诉将第二个参数视为PHP代码。