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