2016-08-01 7 views
0

Ich möchte eine Direktive am Anfang ausblenden, wenn es noch erstellt. In dieser Direktive integriere ich ein jquery Karussell. Dies ist die Richtlinie:QuerySelector ist keine Funktion mit Winkeldirektive

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

Dies ist der Haupt html:

<slick></slick> 

Dies ist die slick.html ist:

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

Das Problem ist, dass ich diesen Fehler in der Konsole haben :

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

EDIT Ich habe versucht, dies zu tun:

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

da, mit Blick auf das Debuggen, das ‚Element‘ ist so strukturiert:

0:div length:1 

Auf diese Weise habe ich den Fehler nicht aber das Karussell baut nicht.

+0

Vielleicht könnten Sie ein [mcve] zur Frage mit Stack Snippets hinzufügen? Das könnte Ihnen helfen, eine nützliche Antwort schneller zu bekommen. –

Antwort

0

Wenn Sie Jquery Carousel verwenden, dann muss es tiquical jquery sein. Also versuchen Sie:

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