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 に答える