Question

对于AngularJS来说是一个新手，我只是想尝试做一些简单的图像预加载，但是在“角度方式”中有点迷失了。做事。我知道我需要以某种方式使用指令，但不知道如何干净利落地做到这一点。我有一个＆＃39; ImgLoader＆＃39;获取一系列图像位置并返回一个承诺的服务，我的控制器会响应该承诺。我使用类似于here的方法，但我想在加载时显示每个图像。

以下是我的观点：

<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>

这是我的控制器：

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); });

基本上，因为我必须将缩略图数据推送到我的imgLoader服务的数组中，所以我不知道如何在此处编写指令作为原始模型之间的关系（从CMS中取出一些JSON）我输入我的imgLoader服务的缩略图数组丢失了。

如果我只想一起破解某些东西，我可能会使用查找或其他东西来重新匹配数据，但我确定可能会出现一些指令聪明的东西？注意，我想预先渲染标记，只在加载图像时显示/添加一个类。

Answer 1

你可以这样做：

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

我的意思是：

.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>');
                        });      
                    }
                }
            });

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

1 个答案: