AngularJS簡單工廠導致無限循環循環 - 為什么？ （codepen）

Question

在顯示之前，我想檢查圖像以查看資源是否可用。 我在AngularJS中找到了一個很好的方法： Angular js - isImage（） - 通過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

Angular運行摘要循環，並解釋您的模板。 它看到{{testImage('anylink')}}並調用它。 這會調用Utils.isImage，它會創建一個promise。 promise將返回testImage，但testImage本身並不會返回任何內容，因此模板不會顯示任何內容。

過了一會兒，承諾就解決了。 Angular看到了這一點，因此它運行摘要循環並解釋您的模板。 它看到{{testImage('anylink')}}並調用它。 這調用了Utils.isImages，它創造了一個舞會......哦，廢話，我們在循環中。 它將調用isImage，它創建一個promise，然后當該promise解析時，它再次解釋模板並調用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

通過angular自動監視$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上進行了測試。