QuerySelector 不是带有 Angular 指令的函数

Question

我想在指令还在创建的时候隐藏它的开头。在这个指令中，我正在集成一个 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
                        }
                        }
                    ]
                })
        }
    }
}

这是主要的html:

<slick></slick>

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

问题是我在控制台中有这个错误：

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

编辑我试着这样做：

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

因为，查看调试，'element' 是这样结构化的：

0:div length:1

这样我没有报错，但是轮播没有建立。

Answer 1

如果您正在使用 Jquery 轮播，那么它必须是典型的 jquery。所以尝试：

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

QuerySelector 不是带有 Angular 指令的函数

QuerySelector is not a function with Angular Directive

javascript

jquery

directive

angularjs