带有 Angular 表达式绑定的无限循环 [英] Infinite loop with Angular expression binding

问题描述

我有一个 Angular 应用程序，它通过一个简单的表达式绑定来显示控制器方法返回的值:

{{getValue()}}

如果有问题的方法只返回一个值，则该方法被调用两次，这很奇怪:

$scope.getValue = function(){返回一些价值"；}

但是如果该方法执行一些异步工作，例如从服务器获取文件，代码将进入无限循环:

$scope.getValueAsync = function(){$http.get('myfile.html').success(功能(数据，状态，标题，配置){返回一些异步值"；});返回'找不到文件';//每次都返回相同的值，但 $digest 循环仍然循环}

我是 Angular 的新手，所以可能在这里错过了一些基本的东西，但有人可以解释一下发生了什么吗?

Plunker

这是一个与 http://plnkr.co/7BriYDbdVJvIoIigQcTU

一起玩的 plunker

解决方案

即使您的 async 函数每次都返回完全相同的字符串，$digest 循环仍会在循环中触发，因为您的函数也使用 $http 服务进行 ajax 调用.

$http 服务触发 $rootScope.$apply() 当请求完成 并且由于 $apply 触发了 $digest 循环，它使您的视图表达式被重新评估，作为回报导致您的异步函数再次被调用，依此类推...

app.controller('MainCtrl', function($scope, $http) {$scope.getValue = function(){返回一些价值"；}$scope.getValueAsync = function(){$http.get('myfile.html').success(功能(数据，状态，标题，配置){返回一些异步值"；});返回'找不到文件';}});

<div>{{getValueAsync()}}</div>

故事的寓意:如果您在表达式中使用函数，请确保您的函数不会影响它们之外的会触发 $digest 循环的内容，并确保您的函数始终返回给定相同的输入，相同的输出.

I have an angular application that displays the value returned by a controller method through a simple expression binding:

<div>{{getValue()}}</div>

If the method in question just returns a value, the method is called twice, and that is strange enough:

$scope.getValue = function(){
  return 'some value';
}

But if the method does some asynchronous work such as getting a file from the server, the code goes into an infinite loop:

$scope.getValueAsync = function(){
  $http.get('myfile.html')
    .success(function (data, status, headers, config) {
      return 'some async value';
    });

  return 'file not found'; // same value returned every time but $digest cycle still loops
}

I'm new to Angular so have probably missed something basic here, but can someone please explain what is going on?

Plunker

Here's a plunker to play with http://plnkr.co/7BriYDbdVJvIoIigQcTU

解决方案

Even though your async function returns the same exact string every time, the $digest cycle is fired in loops because your function also makes an ajax call with $http service.

$http service triggers $rootScope.$apply() when requests are completed and since $apply triggers a $digest cycle it makes your view expression to be re-evaluated, which in return causes your async function to be called again, and so on...

app.controller('MainCtrl', function($scope, $http) {

  $scope.getValue = function(){
    return 'some value';
  }

  $scope.getValueAsync = function(){
    $http.get('myfile.html')
      .success(function (data, status, headers, config) {
        return 'some async value';
      });

    return 'file not found';
  }
});

<div>{{getValueAsync()}}</div>

Moral of the story: If you use functions in expressions, make sure your functions don't affect something outside of them that would trigger a $digest loop, and make sure your functions always return the same output given the same input.

这篇关于带有 Angular 表达式绑定的无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！