爲什麼我的ng-repeat指令創建一個無效的HTTP請求？

Question

使用Anguar UI的路由器，我已經配置了以下狀態：

angular.module('foos').config(['$stateProvider', 
function($stateProvider) { 
    $stateProvider. 
    state('seeFoos', { 
     url: '/foos', 
     templateUrl: 'modules/foos/client/views/list-foos.client.view.html', 
     controller: 'FoosController', 
     resolve: { 
      initialData : function(Foos) { 
      return Foos.query(); 
      } 
     } 
    }); 
} 
]); 

在我看來，我用NG-重複通過從服務獲取圖像名稱加載一些圖像。

<section> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 top15" 
     ng-repeat-start="foo in bar"> 
     <h4 ng-bind="foo.name"></h4> 
     <div class="row"> 
      <a href="{{foo.link}}"> 
       <img alt="{{foo.name}}" src="modules/foos/client/img/{{foo.imgName}}" class="col-xs-4" /> 
      </a> 
     </div> 
    </div> 
    <div class="clearfix" ng-if="$index%2==1"></div> 
    <div ng-repeat-end=""></div> 
</div> 
</section> 

注意，我保證Foos.query（）模板加載之前解決。然後，控制器加載結果bar在scope

angular.module('foos').controller('FoosController', ['$scope', '$stateParams', '$location', 'Foos', 'initialData', 
    function($scope, $stateParams, $location, Foos, initialData) { 
    $scope.bar = initialData; 
    } 
]); 

一切正常，除返回404錯誤以下額外的HTTP GET：

GET /modules/foos/client/img/%7B%7Bfoo.imgName%7D%7D 

我不明白爲什麼一旦我在狀態配置上添加resolve選項，就會生成請求。

Answer 1

主要問題可以通過使用ng-src而不是src來解決。從documentation ...

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}} . The ngSrc directive solves this problem.

---

其次，你resolve函數不等待查詢完成狀態負載之前完成。這是在$resource actions設計...

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

如果做想讓它等待，改變resolve到

resolve: { 
    initialData : function(Foos) { 
    return Foos.query().$promise; 
    } 
} 

---

最後，你可以簡單地使用ng-if="$odd"代替ng-if="$index%2==1"。