能够从另一篇文章的DTing修改指令，以使其与同一页面上的多个轮播一起使用。这是一个工作的plnkr
-编辑- 让另一个plnkr给出如何添加项目的示例。执行reinit（）不起作用会导致猫头鹰传送带被破坏，这会丢失数据元素，并且永远无法再次初始化。
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) { $scope.items1 = [1,2,3,4,5]; $scope.items2 = [1,2,3,4,5,6,7,8,9,10];}).directive("owlCarousel", function() { return { restrict: 'E', transclude: false, link: function (scope) { scope.initCarousel = function(element) { // provide any default options you want var defaultOptions = { }; var customOptions = scope.$eval($(element).attr('data-options')); // combine the two options objects for(var key in customOptions) { defaultOptions[key] = customOptions[key]; } // init carousel $(element).owlCarousel(defaultOptions); }; } };}).directive('owlCarouselItem', [function() { return { restrict: 'A', transclude: false, link: function(scope, element) { // wait for the last item in the ng-repeat then call init if(scope.$last) { scope.initCarousel(element.parent()); } } };}]);这是HTML
<!DOCTYPE html><html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" /> <script data-require="angular.js@1.3.x" src="https://pre.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://pre.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <data-owl-carousel data-options="{navigation: true, pagination: false, rewindNav : false}"> <div owl-carousel-item="" ng-repeat="item in ::items1" > <p>{{::item}}</p> </div> </data-owl-carousel> <data-owl-carousel data-options="{navigation: false, pagination: true, rewindNav : false}"> <div owl-carousel-item="" ng-repeat="item in ::items2" > <p>{{::item}}</p> </div> </data-owl-carousel> </body></html>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）