come si fa la direttiva in angolo del carosello del gufo?

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

                 

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