详解如何将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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
mocha的时序规则讲解
Feb 16 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue.js实现二级菜单效果
Oct 19 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Python学习小技巧之列表项的排序
2017/05/20 Python
Python科学画图代码分享
2017/11/29 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python中字符串的操作方法大全
2018/06/03 Python
详解python读取和输出到txt
2019/03/29 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
详解Python打包分发工具setuptools
2019/08/05 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
机械系毕业生求职信
2014/05/28 职场文书
专项法律服务方案
2014/06/11 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
六查六看剖析材料
2014/10/06 职场文书
实习推荐信格式模板
2015/03/27 职场文书
催款通知书范文
2015/04/17 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python