Я делаю веб-приложение с угловым и угловым материалом. Мне нужно сделать карусель, и я нашел хороший компонент 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)
}
});
Я бы использовал логическую переменную области, которая отслеживает, когда 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>