加载指令时加载程序

Question

我正在使用 Angular 和 Angular Material 做一个网络应用程序。我必须做一个轮播，我发现了一个不错的 jquery 组件。所以我做了一个指令。它可以工作，但问题是在 1 或 2 秒内，我看到轮播的元素像 <ul> 列表一样垂直显示。然后，在构建指令时，我正确地看到了轮播。
有没有办法插入在指令未构建时显示的加载程序（可能带有角度材料）？

这是代码

angular.module('app').directive("slick", function($timeout) {
        return function(scope: any, el: any, attrs: any) {
            $timeout((function() {
                el.slick({
                    arrows: true,
                    autoplay: false,
                    dots: true,
                    infinite: false,
                    speed: 300,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    responsive: [
                        {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                        },
                        {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                        },
                        {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                        }
                        // You can unslick at a given breakpoint now by adding:
                        // settings: "unslick"
                        // instead of a settings object
                    ]
                })
            }), 100)
        }
    });

Answer 1

我会使用一个布尔范围变量来跟踪 slick 的初始化时间。从 false 开始，并使用 slick 的 init 事件知道何时设置为 true。

基本上：

angular.module('app').directive("slick", function($timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        templateUrl: 'slick.tpl.html',
        link: function(scope: any, el: any, attrs: any) {
            scope.slickReady = false;

            // use a child element (defined in template) so we can toggle between carousel and spinner
            var slickEl = el.children('.slick').first();
            if(slickEl){
                // listen for slick's init event 
                slickEl.on('init', function(){
                    scope.slickReady = true;
                });

                // initialize slick (not sure why you had it wrapped in $timeout in OP)
                slickEl.slick({
                    ...
                });
            }
        };
    }
});

slick.tpl.html

<div ng-switch on="slickReady">
    <div class="slick" ng-switch-when="true"></div>
    <div class="spinner" ng-switch-when="false">
        <!-- use whatever kind of spinner you want -->
    </div>
</div>