詳解如何將angular-ui的圖片輪播組件封裝成一個(gè)指令

更新時(shí)間：2017年05月09日 16:52:13 作者：你的一燈

本篇文章主要介紹了如何將angular-ui的圖片輪播組件封裝成一個(gè)指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

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

準(zhǔn)備工作:

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

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

說明：指令控制器中的代碼都是angualr-ui官網(wǎng)上拷貝的（因?yàn)榇宋恼碌闹攸c(diǎn)是如何將其封裝成指令，其他的不做重點(diǎn)）

指令的js代碼

define(['app'],function(myapp){
  myapp.directive('picchange',[function(){
    return {
      scope:{
        picurl:'=',
      },
      controller:['$scope',function($scope){
        $scope.myInterval = 5000;//輪播的時(shí)間間隔
        $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(這個(gè)沒啥理解的)

指令的html

<div>

  <div style="height: 305px;">

    <uib-carousel no-wrap="noWrapSlides" interval="myInterval" active="active">

      <uib-slide index="slide.id" ng-repeat="slide in slides track by slide.id">

        <img style="margin: auto;" ng-src="{{slide.image}}">

        <div class="carousel-caption">

          <h4>Slide {{slide.id}}</h4>

          <p>{{slide.text}}</p>

        </div>

      </uib-slide>

    </uib-carousel>

  </div>

  <div class="row">

    <div class="col-md-6">

      <button class="btn btn-info" type="button" ng-click="addSlide()">Add Slide</button>

      <button class="btn btn-info" type="button" ng-click="randomize()">Randomize slides</button>

      <div class="checkbox">

        <label>

          <input type="checkbox" ng-model="noWrapSlides">

          Disable Slide Looping

        </label>

      </div>

    </div>

    <div class="col-md-6">

      Interval, in milliseconds: <input class="form-control" type="number" ng-model="myInterval">

      <br>Enter a negative number or 0 to stop the interval.

    </div>

  </div>

</div>

到此為止關(guān)于指令的封裝已經(jīng)完成，接下來是如何使用的問題：

（1）有一個(gè)頁面要用到此指令：（命名為test.html）

<p>圖片的輪播</p>

<div picurl="img" picchange=""></div><!--img是用來傳遞參數(shù)的-->

test.html對(duì)應(yīng)的控制器：（idea_test_ctrl）

define(['app','directives/picchange/picchange'],function(myapp){
  myapp.controller('idea_test_ctrl',['$scope',function($scope){
    console.log("this is idea_test_ctrl 的控制器");
    $scope.img=[//img是一個(gè)對(duì)象，其中包含了圖片的地址，以及文字描述
      {imgUrl:'images/test/1.jpg',wordDes:'this is good pic'},
      {imgUrl:'images/test/2.jpg',wordDes:'這是一張很好看的圖片'},
      {imgUrl:'images/test/3.jpg',wordDes:'it is good pic'}
    ];

  }]);
});

這里給出我的路由配置，便于大家理解：

.state('home.ideas.test', {//(測(cè)試)

        url: '/test',

        views: {

          "part": {

            templateUrl: 'tpls/ideas/test.html',

            controller:"idea_test_ctrl"

          }

       }

 })

到此已經(jīng)講解完；

ui-bootstrap的地址：http://angular-ui.github.io/bootstrap/versioned-docs/1.3.2/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: