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)

EDIT 我试着这样做：

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

因为，在查看调试时，'element'结构如此：

0:div length:1

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

Answer 1

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

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

QuerySelector不是Angular Directive的函数

1 个答案: