详解如何将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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
详解react-redux插件入门
Apr 19 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
linux下编译安装memcached服务
2014/08/03 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
jQuery select控制插件
2009/08/17 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python GUI实例学习
2017/11/21 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python with (as)语句实例详解
2020/02/04 Python
python 瀑布线指标编写实例
2020/06/03 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
Ado与Ado.net的相同与不同
2014/12/08 面试题
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
通知范文怎么写
2015/04/16 职场文书
大学生团日活动总结
2015/05/06 职场文书
小学英语教学随笔
2015/08/14 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL