Javascript 如何使用Angular指令在更新此承诺时更新img src属性

对AngularJS来说是全新的，我只是想做一些简单的图像预加载，但在做事情的“角度方式”中有点迷失。我知道我需要以某种方式使用指令，但不知道如何干净地执行。我有一个“ImgLoader”服务，它获取一系列图像位置并返回一个承诺，我的控制器对此做出响应。我使用了一种类似的方法，只是我想在加载时显示每个图像

以下是我的看法：

<ul>

  <li data-project-id="{{ project.slug }}" ng-repeat="project in projects">
    <a href="/#/projects/{{project.slug}}">
      <h2>{{project.title}}</h2>
        // repeater because thumbnail is in an array, even though there is only 1
        <img ng-repeat="thumb in project.thumbnail" some-sort-of-directive />

    </a>
  </li>

</ul>

基本上，因为我必须将缩略图数据推送到imgLoader服务的数组中，所以我不确定如何在这里编写指令，因为原始模型（从CMS中提取的一些JSON）和我为imgLoader服务提供的缩略图数组之间的关系丢失了

如果我只是想把一些东西拼凑在一起，我可能会使用查找或其他方法来再次匹配数据备份，但我肯定会发生一些巧妙的指令？注意，我希望预呈现标记，并且仅在加载图像时显示它/添加类。

您可以执行以下操作：

angular.module('myApp')

.controller('ProjectsCtrl', function($scope, projectsService, imgLoader) {

  function loadImages(data) {
    // project data, including title, etc 
    $scope.projects = data;
    // I just need the thumbs as an array for my imgLoader service
    $scope.thumbs = [];
    // sanitise the data
    data.filter(function(data) {
      // get first (and only) thumb from array
      return $scope.thumbs.push(data.thumbnail[0].url);
    });

    // load 'em up
    imgLoader.loadImages($scope.thumbs)
      .then(onAllImagesLoaded, onImageError, onImageLoaded);
  }

  function onImageLoaded(imgSrc) {
    // do something with directive here?
    console.log(imgSrc);
  }

  function onImageError() {
    console.log('onImageError');
  }

  function onAllImagesLoaded() {
    console.log('onAllImagesLoaded');
  }

  projectsService.getProjects()
    .then(loadImages);

});

我的想法是：

.directive('spinnerOnLoad', function() {
            return {
                restrict: 'A',
                link: function(scope,element){
                    element.on('load', function() {
                       //is loaded
                    });
                    scope.$watch('ngSrc', function() {
                       // loading
                    });      
                }
            }
        });

.spinner{
位置：绝对位置；
左：0；
排名：0；
背景：#CCC url（./spinner.gif）无重复中心；
显示：块；
宽度：220px；
高度：220px；
}
.feed img.spinner-show{
能见度：可见；
}
.进料img.spinner-hide{
可见性：隐藏；
}
.directive（'spinnerOnLoad'，function（）{
返回{
限制：“A”，
链接：功能（范围、元素）{
on（'load'，function（）{
element.removeClass（'spinner-hide'）；
元素addClass（'spinner-show'）；
element.parent（）.find（'span'）.remove（）；
});
作用域：$watch（'ngSrc'，function（）{
元素addClass（'spinner-hide'）；
element.parent（）.append（“”）；
});      
}
}
});

谢谢您的回答。我觉得这是在绕过我的服务？我更愿意对承诺做出反应，而不是添加另一个加载事件处理程序。但这完全有效：）

.spinner{
                position: absolute;
                left: 0;
                top: 0;
                background: #CCC url(./spinner.gif) no-repeat center center;
                display: block;
                width:220px;
                height: 220px;
            }
            .feed img.spinner-show{
                visibility: visible;
            }
            .feed img.spinner-hide{
                visibility: hidden;
            }
    .directive('spinnerOnLoad', function() {
                return {
                    restrict: 'A',
                    link: function(scope,element){
                        element.on('load', function() {
                            element.removeClass('spinner-hide');
                            element.addClass('spinner-show');
                            element.parent().find('span').remove();
                        });
                        scope.$watch('ngSrc', function() {
                            element.addClass('spinner-hide');
                            element.parent().append('<span class="spinner"></span>');
                        });      
                    }
                }
            });