AngularJS自定义指令之复制指令实现方法


Posted in Javascript onMay 18, 2017

本文实例讲述了AngularJS自定义指令之复制指令实现方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="angular.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var app = angular.module('myapp', []);
      app.directive('duplicate', function($rootScope){
       return {
        transclude: 'element',
        replace: true,
        priority: 2,
        link: function(scope, elem, attrs, ctrl, transclude) {
         var times = parseInt(attrs.duplicate);
         var previous = elem;
         var childScope;
         for(var i = 0; i < times; i++) {
          childScope = scope.$new();//新建scope的子scope
          childScope.number = i;
          transclude(childScope, function(clone){//transclude将每个childScope与clone关联, 一一对应(一对对)
            // console.log(childScope.$id);
            // console.log(clone.scope().$id)
            previous.after(clone);//在previous与clone拼接再赋值给clone
            previous = clone;
          });
         }
          console.log(scope.childHead.number);//可以看到5个全是scope的子scopeconsole.log(scope.childTail.number);
          console.log(scope == $rootScope)//可以看到此时指令scope就是$rootScope 因为scope:false
        },
       }
      });
    </script>
  </head>
  <body ng-app="myapp">
    <input type='text' ng-model='number' duplicate="5" />
    <br/>
    <!--与上面绑定 -->
    <input type="text" ng-model="childHead.number"/><br/><inputtype="text"ng−model="childTail.number" />
  </body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
javascript 节点遍历函数
Mar 28 Javascript
JavaScript获取路径设计源码
May 22 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
小程序自定义轮播图圆点组件
Jun 25 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 #Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 #Javascript
JS验证全角与半角及相互转化的介绍
May 18 #Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 #Javascript
Javascript实现倒计时时差效果
May 18 #Javascript
vue-cli webpack 开发环境跨域详解
May 18 #Javascript
JavaScript实现简单的星星评分效果
May 18 #Javascript
You might like
php 表单数据的获取代码
2009/03/10 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
个人现实表现材料
2014/02/04 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android