AngularJS简单工厂导致无限循环循环 - 为什么？ （codepen）

Question

我想检查的图像，看是否该资源可用，显示它之前。我找到了一个好办法做到这一点在这里AngularJS：Angular js - isImage( ) - check if it's image by url

但每次我尝试实现它的时候，一个无限循环被触发，即使我减少功能在codepen最简单的形式：https://codepen.io/anon/pen/mBwgbE

测试图像功能（JS）

$scope.testImage = function(src) {
    console.log('function triggered');
                Utils.isImage(src).then(function(result) {
             return "result";
         });
    };

使用（HTML）

<h3>Image link broken<h3>
<p>{{testImage('anylink')}}</p>

<h3>Image link OK<h3>
<p>{{testImage('http://lorempixel.com/400/200/sports/1/')}}</p>

任何人都可以解释这种现象给我，并帮我解决吗？

Answer 1

角运行摘要循环，并解释你的模板。它认为{{testImage('anylink')}}并调用它。这就要求进入Utils.isImage，它创建了一个承诺。许是回到testImage，但testImage自己好好尝试返回任何东西，所以模板显示什么。

过了一会儿，承诺解决。角看到这一点，所以它运行的消化循环并解释你的模板。它认为{{testImage('anylink')}}并调用它。这就要求进入Utils.isImages，它创建了一个舞会......哦废话，我们是在一个循环。这将调用isImage，它创建了一个承诺，然后当这一承诺解决，再次解释模板，并呼吁isImage，开始全部结束。

相反，我会建议，当你的控制器的负荷，你创建的承诺权，然后，当他们解决，你坚持，你需要从他们到控制器的具体值的任何值。事情是这样的：

function myController($scope, Utils) {
    $scope.anyLink = null;
    $scope.sportsLink = null;
    Utils.isImage('anyLink')
        .then(function (result) { $scope.anyLink = result });
    Utils.isImage('http://lorempixel.com/400/200/sports/1/')
        .then(function (result) { $scope.sportsLink = result });

    $scope.heading = "My Controller";
}

然后在你的模板，以$ scope.anyLink或$ scope.sportsLink互动

Answer 2

$scope.testImage由角自动观看看testImage的变化。因此，您可以通过使用$scope.cache可变停止无限循环。

  $scope.testImage = function(src) {
    console.log('function triggered');
    if($scope.cache[src] == "result")
      return "result";
    Utils.isImage(src).then(function(result) {
             $scope.cache[src] = "result";
             return "result";
         });
    }; 

它是你的codepen测试。