Question

我正在使用Angular和Angular Material做一个Web应用程序。我必须做一个旋转木马，我发现了一个很好的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

我会使用一个布尔范围变量来跟踪初始化光滑的时间。从false开始，并使用光滑的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>

加载程序while指令正在加载

1 个答案: