puoi per favore dirmi come creare dirctive in js angolari. Ho bisogno di usare il plug-in carousel di gufo in js come ho fatto in jqm fiddle http://jsfiddle.net/ezanker/o9foej5L/1/ . Ho bisogno di fare la stessa cosa in usando la direttiva angular, per favore, dimmi come implementerò questa direttiva usando http://plnkr.co/edit/4ySYwsqrBKUJUj6MwoRY?p=catalogue
one
- Sto cercando di associare un'area di testo a una variabile angularjs e farla riflettere alle modifiche apportate all'area di testo con jquery, nella variabile angular js
- Il multiselect Bootstrap non funziona quando eseguo il bind dei dati dalla risposta in Angularjs
- Come aggiornare la direttiva AngularJS quando viene modificato l'URL?
- Come impostare il tempo nel cursore a squillo in js angular?
- Js angular non funziona in cioè 11
two
three
Puoi usare una direttiva come questa:
app.directive('owlCarousel', function() { return { restrict: 'A', scope: { owlOptions: '=' }, link: function(scope, element, attrs) { $(element).owlCarousel(scope.owlOptions); } }; });
E sull’HTML aggiungilo come attributo:
...
dimostrazione
Ecco la mia soluzione generale. Funziona con ngrepeat e con i dati di aggiornamento dell’oscilloscopio. Il trucco è aggiungere una direttiva per l’ultimo elemento, quindi l’init verrà triggersto quando l’ultimo elemento è nella dom.
...
… il js
.directive('owlCarousel', ['$timeout', function ($timeout) { return { restrict: 'A', link: function (scope, element, attrs) { scope.initCarousel = function () { // hacky ondomready $timeout(function hackyDomReady() { // if is already initialized destroy and re create it // $(element).data().owlCarousel <- owl 2 if ($(element).data('owlCarousel')) { // <- owl 1 // $(element).trigger('destroy.owl.carousel'); // <- owl 2 $(element).data('owlCarousel').destroy();// <- owl 1 } $(element).owlCarousel({ autoPlay: 10000, navigation: true, items: attrs.owlSlidesCount }); }); }; } }; }]) .directive('owlCarouselItem', [function () { return { restrict: 'A', transclude: false, link: function (scope, element) { if (scope.$last) { scope.initCarousel(); } } }; }])