AngularJS - NG-SRC變化事件

Question

我有以下模板：

<img ng-src="{% ng displayImage %}" alt="" /> 
<ul class="thumbnails" data-obj-id="{{ obj.id }}"> 
    <li class="span2" ng-repeat="image in images"> 
     <a class="thumbnail" href="#" ng-click="selectImage($index)"> 
      <img ng-src="{% ng image.thumbnail %}" alt="" /> 
     </a> 
    </li> 
</ul> 

{%ng something } transaltes到{{ something }}。

和指導：

angular.module('profileDirectives', []). 
    directive('thumbnails', function() { 
     return { 
      restrict: 'C', 
      transclude: false, 
      controller: function ($scope, $element, $attrs, Image, $window) { 
       $scope.images = Image.query({ 
        obj_id: $attrs.objId 
       }, function() { 
        $scope.selectImage(0); 
       }); 

       $scope.selectImage = function(index) { 
        $scope.displayImage = $scope.images[index].image; 
       } 
      } 
     } 
    }); 

這是什麼東西做的是加載圖像的列表爲$scope.images和改變ng-src當你點擊縮略圖。這是正常工作，但有些圖像需要一些時間來加載，因此加載指標似乎是必要的。聽取由於ng-src值發生變化而發生的圖像HTTP GET請求並在請求加載時顯示加載指示符似乎是合乎邏輯的，但我不確定是否有方法來偵聽或捕獲此請求。

任何想法？

Answer 1

您應該使用HTTPInterceptor作爲此頁解釋： http://docs.angularjs.org/api/ng.$http

// register the interceptor as a service 
$provide.factory('myHttpInterceptor', function($q) { 
    return function(promise) { 
    // signal service to display loading indicator 
    return promise.then(function(response) { 
     // signal service to remove loading indicator 
    }); 
    } 
}); 

$httpProvider.responseInterceptors.push('myHttpInterceptor'); 

另一種解決方案可能是要顯示的圖像背後加載指標？我認爲一張圖片在尚未加載時會變爲透明。