在这里我想在项目中封装一个图片轮播的指令
（本项目使用的是ionic框架）
1）定义指令
define(['app'],function(myapp){
myapp.directive('myslidebanner',['$state',function(s){
return{
templateUrl:'directives/slide-banner/slide-banner.html',
scope:{
banimg:'=',//数据的来源
},
link:function(s,el,atr){
s.$watch('banimg',function(picList){
//在这里，我使用的了，$watch监听banimg,原因就是banimg的数据是来自于数据
//库，这就会造成页面渲染结束，数据还没有取到的尴尬现象
if(picList)
s.picList=picList;
});
s.showbaner=atr.showbaner;//atr是使用指令的元素的属性集合
},
controller:['$state','$scope',function($state,s){
}]
}
}]);
});
指令的模板页面：
<div class="index-banner">
<!--<img ng-src="img/deal/home/banner.png" style="width:100%;">-->
<div ng-if="!showbaner">
<div style="left: 0px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
<a class="box">
<img ng-src={{banimg[0].imgdomin+banimg[0].imgid}} style="height:305px">
</a>
</div>
</div>
<div class="app_index_slide" ng-if="showbaner">
<ion-slide-box class="app_index_slide" does-continue="true" auto-play="true"
on-slide-changed="slideChanged($index)"
delegate-handle="slideimgs"
>
<ion-slide ng-repeat="item in picList track by $index">
<!--href="#/tab/ad_linkurl?url={{item.LinkUrl}}&title={{item.Title}}"-->
<a class="box" style="display:block" ui-sref="tab.deal_ad_linkurl({url:item.link,title:item.title})"><img
ng-src={{item.imgdomin+item.imgid}}></a>
</ion-slide>
</ion-slide-box>
</div>
2）指令的使用
<myslidebanner banimg="banimg" showbaner="{{showbaner}}">
<!--解释：banimg定义成‘=’的形式，在使用时候，是直接用双引号就行，不需要使用{{}},banimg的数据来源于页面控制器中调用接口返回数据来源-->
</myslidebanner>
指令中的controller,和link函数在一些情况下是可以相互代替的。
我们完全可以将link函数换成controller
定义时的独立作用域：
scope：{
banimg:'=',
showbaner:'='
}
controller:["$scope",'$state',function(s,$state){
s.$watchGroup(['banimg','showbanner'],function(picList,showbaner){
if(picList)
s.picList=picList;
s.showbaner=true;
});
}]
使用的时候：
<myslidebanner banimg="banimg" showbaner="showbaner">
</myslidebanner>