QuerySelector is not a function with Angular Directive

Question

I want to hide a directive at the beginning, when it is still creating. In this directive I'm integrating a jquery carousel. This is the directive:

    return {
    restrict: 'E',
    replace: true,
    scope: true,
    templateUrl: 'slick.html',
    link: function(scope: any, element: any, attrs: any) {
        scope.slickReady = false;

        var slickEl = element.querySelector('.slick');
        if(slickEl){
            slickEl.on('init', function(){
                scope.slickReady = true;
            });

                slickEl.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
                        }
                        }
                    ]
                })
        }
    }
}

This is the main html:

<slick></slick>

This is the slick.html:

<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>

The problem is that I have this error in console:

TypeError: element.querySelector is not a function
at Object.link (http://localhost/js/directives/slick.js:9:35)

EDIT I tried to do this:

var slickEl = element[0]querySelector('.slick');
if(slickEl.length > 0)

because, looking at the debugging, the 'element' is so structured:

0:div length:1

In this way, I have not the error but the carousel doesn't build.

Perhaps you could add an [mcve] to the question using Stack Snippets? That might help you get a useful answer more quicly. — T.J. Crowder, Aug 01 '16 at 08:12

score 0 · Accepted Answer · answered Aug 01 '16 at 08:21

0

If You are using Jquery Carousel then it must be tipical jquery. So try:

slickEl=$(element).find(".slick");

answered Aug 01 '16 at 08:21

Maciej Sikora

19,374
4
49
50

QuerySelector is not a function with Angular Directive

1 Answers1