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

Posted 2020-09-20 BD_evel

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

（本项目使用的是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>