小編給大家分享一下怎么將angular-ui的圖片輪播組件封裝成一個指令，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在項目開發(fā)中我們經(jīng)常會遇到圖片輪播的功能點：

如果我們開發(fā)人員自己原生手寫，將會花費很多的時間，最終得不償失。

接下來就詳細(xì)說說如何使用angular-ui發(fā)熱圖片輪播模塊，并且將它寫成一個指令（便于復(fù)用）

一如既往的我們項目中使用時requireJS進(jìn)行js代碼的編譯

準(zhǔn)備工作:

1):引入angularJS , ui-bootstrap-tpls-1.3.2(我使用的是1.3.2版本的)

第一步：自己寫一個指令（命名為picchange）

說明：指令控制器中的代碼都是angualr-ui官網(wǎng)上拷貝的（因為此文章的重點是如何將其封裝成指令，其他的不做重點）

指令的js代碼

define(['app'],function(myapp){
  myapp.directive('picchange',[function(){
    return {
      scope:{
        picurl:'=',
      },
      controller:['$scope',function($scope){
        $scope.myInterval = 5000;//輪播的時間間隔
        $scope.noWrapSlides = false;//是否循環(huán)輪播
        $scope.active = 0;//起始所顯示的圖片（0：下標(biāo)為0的圖片）
        var slides = $scope.slides = [];//用于存放圖片地址
        var currIndex = 0;
        $scope.addSlide = function() {
          var newWidth = slides.length + 1;
          slides.push({
            image: $scope.picurl[newWidth].imgUrl,//圖片的url
            text: $scope.picurl[newWidth].wordDes,//圖片的描述文字
            id: currIndex++
          });
        };
       //................隨機(jī)...........
        $scope.randomize = function() {
          var indexes = generateIndexesArray();
          assignNewIndexesToSlides(indexes);
        };
        for (var i = 0;i<$scope.picurl.length;i++) {
          $scope.addSlide();
        }
        // Randomize logic below
        function assignNewIndexesToSlides(indexes) {
          for (var i = 0, l = slides.length; i < l; i++) {
            slides[i].id = indexes.pop();
          }
        }
        function generateIndexesArray() {
          var indexes = [];
          for (var i = 0; i < currIndex; ++i) {
            indexes[i] = i;
          }
          return shuffle(indexes);
        }
        // http://stackoverflow.com/questions/962802#962890
        function shuffle(array) {
          var tmp, current, top = array.length;
          if (top) {
            while (--top) {
              current = Math.floor(Math.random() * (top + 1));
              tmp = array[current];
              array[current] = array[top];
              array[top] = tmp;
            }
          }
          return array;
        }
      }],
      templateUrl:'js/directives/picchange/picchange.html',//輪播的頁面
      link:function(s,e,attrs){
      },
    }
  }]);
});

好了上面的代碼都是拷貝來的，不做解釋

輪播模塊的html:（picchange.html），指令的html(這個沒啥理解的)

指令的html

  

    

      

        

        

          
Slide {{slide.id}}

          
{{slide.text}}