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


Posted in Javascript onMay 09, 2017

在项目开发中我们经常会遇到图片轮播的功能点:

如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失。

接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于复用)

一如既往的我们项目中使用时requireJS进行js代码的编译

准备工作:

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

第一步:自己写一个指令(命名为picchange)

说明:指令控制器中的代码都是angualr-ui官网上拷贝的(因为此文章的重点是如何将其封装成指令,其他的不做重点)

指令的js代码

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){
      },
    }
  }]);
});

好了上面的代码都是拷贝来的,不做解释

轮播模块的html:(picchange.html),指令的html(这个没啥理解的)

指令的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> 

到此为止关于指令的封装已经完成,接下来是如何使用的问题:

(1)有一个页面要用到此指令:(命名为test.html)

<p>图片的轮播</p>

<div picurl="img" picchange=""></div><!--img是用来传递参数的-->

test.html对应的控制器:(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是一个对象,其中包含了图片的地址,以及文字描述
      {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"

          }

       }

 }) 

 到此已经讲解完;

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
使用ES6语法重构React代码详解
May 09 #Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
React.js中常用的ES6写法总结(推荐)
May 09 #Javascript
js上传图片预览的实现方法
May 09 #Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 #Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
react-router实现按需加载
May 09 #Javascript
You might like
用户的详细注册和判断
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
js 颜色选择插件
2017/01/23 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python使用xmlrpc实例讲解
2013/12/17 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python如何爬取个性签名
2018/06/19 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
农民工创业典型事迹
2014/01/25 职场文书
渡河少年教学反思
2014/02/12 职场文书
小小的船教学反思
2014/02/21 职场文书
村党支部换届选举方案
2014/05/02 职场文书
党的生日演讲稿
2014/09/10 职场文书
教师节大会主持词
2015/07/06 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Python预测分词的实现
2021/06/18 Python
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
详细了解java监听器和过滤器
2021/07/09 Java/Android
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python