AngularJS - ng-src променя събитията - angularjs

Имам следния шаблон:

<img ng-src="/images/{% 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="/images/{% ng image.thumbnail %}" alt="" />
</a>
</li>
</ul>

{%ng something } в {{ 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 когато кликнете върху миниизображение. Това работи правилно, но някои изображения отнемат известно време, за да се заредят и следователно индикаторът за зареждане изглежда необходим. Изглежда логично да слушате заявка HTTP GET, която се случва поради ng-src промяна на стойността и показване на индикатор за зареждане, докато заявката се зарежда, но аз не съм сигурен дали има начин да слушате или заснемете тази заявка.

Някакви идеи?

Отговори:

Трябва да използвате HTTPинтерцептор, както е обяснено на тази страница: 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");

Друго решение може да бъде показването на индикатор за зареждане зад изображението? Мисля, че изображението става прозрачно, когато все още не е заредено.