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 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jquery if条件语句的写法
May 19 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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版
2006/10/09 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python如何统计序列中元素
2020/07/31 Python
pytorch forward两个参数实例
2020/01/17 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
幼儿教师考核制度
2014/01/25 职场文书
暑期研修感言
2014/02/17 职场文书
会计岗位描述
2014/02/22 职场文书
会计核算科岗位职责
2014/03/19 职场文书
团日活动总结
2014/04/28 职场文书
后备干部培训方案
2014/05/22 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL