详解如何将angular-ui的图片轮播组件封装成一个指令

define(['app'],function(myapp){  myapp.directive('picchange',[function(){    return {      scope:{        picurl:'=',      },      controller:['$scope',function($scope){        $scope.myInterval = 5000;//轮播的时间间隔        $scope.noWrapSlides = false;//是否循环轮播        $scope.active = 0;//起始所显示的图片（0：下标为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++          });        };       //................随机...........        $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){      },    }  }]);});

<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>　 

<p>图片的轮播</p><div picurl="img" picchange=""></div><!--img是用来传递参数的--> 

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是一个对象，其中包含了图片的地址，以及文字描述      {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', {//(测试)        url: '/test',        views: {          "part": {            templateUrl: 'tpls/ideas/test.html',            controller:"idea_test_ctrl"          }       } })