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 }转换为{{ 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

您应该使用HTTPSterceptor，如本页所述： 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');

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

AngularJS - ng-src更改事件

1 个答案: