详解如何将angular-ui的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点:
如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失。
接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于复用)
一如既往的我们项目中使用时requireJS进行js代码的编译
准备工作:
1):引入angularJS,ui-bootstrap-tpls-1.3.2(我使用的是1.3.2版本的)
第一步:自己写一个指令(命名为picchange)
说明:指令控制器中的代码都是angualr-ui官网上拷贝的(因为此文章的重点是如何将其封装成指令,其他的不做重点)
指令的js代码
define(['app'],function(myapp){ myapp.directive('picchange',[function(){ return{ scope:{ picurl:'=', }, controller:['$scope',function($scope){ $scope.myInterval=5000;//轮播的时间间隔 $scope.noWrapSlides=false;//是否循环轮播 $scope.active=0;//起始所显示的图片(0:下标为0的图片) varslides=$scope.slides=[];//用于存放图片地址 varcurrIndex=0; $scope.addSlide=function(){ varnewWidth=slides.length+1; slides.push({ image:$scope.picurl[newWidth].imgUrl,//图片的url text:$scope.picurl[newWidth].wordDes,//图片的描述文字 id:currIndex++ }); }; //................随机........... $scope.randomize=function(){ varindexes=generateIndexesArray(); assignNewIndexesToSlides(indexes); }; for(vari=0;i<$scope.picurl.length;i++){ $scope.addSlide(); } //Randomizelogicbelow functionassignNewIndexesToSlides(indexes){ for(vari=0,l=slides.length;i好了上面的代码都是拷贝来的,不做解释
轮播模块的html:(picchange.html),指令的html(这个没啥理解的)
指令的html
Slide{{slide.id}}
{{slide.text}}