QuerySelector不是Angular Directive的函数

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:

我想隐藏一个指令,当它仍在创建时。在这个指令中,我正在集成一个jquery轮播。这是指令:

    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:

这是主要的html:

<slick></slick>

This is the slick.html:

这是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:

因为,看一下调试,'element'结构如此:

0:div length:1

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

通过这种方式,我没有错误,但旋转木马没有建立。

1 个解决方案

#1

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

如果您正在使用Jquery Carousel,那么它必须是典型的jquery。所以尝试:

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