0

我有以下模板：

<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 }翻译成{{ 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，并在请求加载时显示加载指示器，但我不确定是否有办法侦听或捕获此请求。

有任何想法吗？

4

1 回答 1

0

您应该按照本页的说明使用 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');

另一种解决方案可能是在图像后面显示加载指示器？我认为图像在尚未加载时会变为透明。

于 2013-05-10T13:07:24.950 回答