Загрузчик во время загрузки директивы

0

Я делаю веб-приложение с угловым и угловым материалом. Мне нужно сделать карусель, и я нашел хороший компонент 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)
        }
    });
  • 0
    Это не отвечает на вопрос, но не рекомендуется смешивать jQuery с AngularJS (и Angular Material) - stackoverflow.com/a/30007955/782358
  • 0
    @camden_kid Не думаю, что это всегда так. Он оборачивает все это в директиву, которая является правильным способом делать вещи в угловых. Даже ответ SO, который вы разместили, говорит так, в пункте 2.
Показать ещё 1 комментарий
Теги:
angular-material
angularjs-directive

1 ответ

0
Лучший ответ

Я бы использовал логическую переменную области, которая отслеживает, когда slick инициализируется. Запустите его с ошибкой и используйте slick init event, чтобы узнать, когда установить значение 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 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>
  • 0
    Спасибо за ответ и извините за опоздание! Я пытался использовать ваш код, но у меня ошибка: TypeError: el.querySelector не является функцией
  • 0
    Я нашел решение этой ошибки, но оно пока не работает. Это slick.tpl: <div ng-switch on = "slickReady"> <div class = "slick" ng-switch-when = "true"> </ div> <div class = "spinner" ng-switch- when = "false"> <div ng-repeat = "item in todos"> <img ng-src = "{{item.face}}" class = "md-avatar img-center"> <p class = "truncate "> {{item.who}} </ p> </ div> </ div> </ div>, и я отредактировал это на js: var slickEl = el [0] .querySelector ('. slick'); потому что, отлаживая его, 'el' был так структурирован: 0: div length: 1
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню