首页 > 代码库 > 基于ionic框架封装一个图片轮播指令的几点

基于ionic框架封装一个图片轮播指令的几点

在这里我想在项目中封装一个图片轮播的指令

(本项目使用的是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="http://www.mamicode.com/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=http://www.mamicode.com/{{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="http://www.mamicode.com/#/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=http://www.mamicode.com/{{item.imgdomin+item.imgid}}>>

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>

  

 

 

 

基于ionic框架封装一个图片轮播指令的几点