panagulis72 panagulis72 - 1 year ago 137
AngularJS Question

Loader while directive is loading

I'm doing a web app with Angular and Angular Material. I have to do a carousel and I found a nice jquery's component. So I made a directive with that. It works, but the problem is that for 1 or 2 seconds I see the elements of the carousel displayed like a

list, so vertically. Then, when the directive is build, I see correctly the carousel.

Is there a way to insert a loader (maybe with angular material) that shows while the directive is not build?

This is the code

angular.module('app').directive("slick", function($timeout) {
return function(scope: any, el: any, attrs: any) {
$timeout((function() {
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 Source

I would use a boolean scope variable that tracks when slick is initialized. Start it at false, and use slick's init event to know when to set to 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();
                // 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)


<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 -->
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download