详解angularJS自定义指令间的相互交互


Posted in Javascript onJuly 05, 2017

AngularJS 自定义指令

transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。

代码示例:(将hello、hi标签进行替换同时span标签嵌套div内)

<script type="text/javascript">
  var m = angular.module('myApp',[]);
  m.directive('hello',function(){
    return{
      restrict:'E',
      replace:true,
      transclude:true,
      template:'<div>hello angular<h1 ng-transclude></h1></div>'
    };
  });
  m.directive('hi',function(){
    return{
      restrict:'E',
      replace:true,
      template:'<span>hi angular</span>'
    };
  });
  m.controller('Aaa',['$scope',function($scope){
    $scope.name='hello';
  }]);
  </script>

<body ng-controller="Aaa">
  <hello>
    <hi></hi>
  </hello>
</body>

页面结果展示:

详解angularJS自定义指令间的相互交互

在自定义指令当中controller与link的区别:

link是指DOM操作,操作也是针对当前标签

controller是多调用性的数据共享,指令与指令间进行交互时也可以设置一些方法数据,在其他标签中也可以调用

require:从外部引入数据,参数为被引入的指令,被引入的指令需要在引入指令的身上。

》^:是指被引入的指令是引入指令的父级

》?:兼容错误

代码示例:

<script type="text/javascript">
  var m = angular.module('myApp',[]);
  m.directive('hello',function(){
    return{
      restrict:'E',
      replace:true,
      transclude:true,
      controller:function($scope){
        //$scope.name='miaov';只能在该标签中使用
        this.name = 'miaov';//可以在其他标签中调用
      },
      template:'<div>hello angular<h1 ng-transclude></h1></div>'
    };
  });
  m.directive('hi',function(){
    return{
      restrict:'E',
      replace:true,
      require:'?^hello',//从外部引入指令,参数为被引入的标签
      link:function($scope,element,attr,reController){
        console.log(reController.name);
      },
      template:'<span>hi angular</span>'
    };
  });
  m.controller('Aaa',['$scope',function($scope){
    $scope.name='hello';
  }]);
  </script>

<body ng-controller="Aaa">
  <hello>
    <hi></hi>
  </hello>
</body>

页面结果展示:

详解angularJS自定义指令间的相互交互

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

Javascript 相关文章推荐
页面载入结束自动调用js函数示例
Sep 23 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 #Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 #Javascript
vue一步步实现alert功能
Jul 05 #Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 #Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 #Javascript
webpack教程之webpack.config.js配置文件
Jul 05 #Javascript
webstorm添加vue.js支持的方法教程
Jul 05 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python运行时间的几种方法
2016/06/17 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python实现GIF图倒放
2020/07/16 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
小学校园活动策划
2014/01/30 职场文书
大学生评语大全
2014/04/18 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年残联工作总结
2014/11/21 职场文书
2014年招商工作总结
2014/11/22 职场文书
经典爱情感言
2015/08/03 职场文书
redis实现排行榜功能
2021/05/24 Redis
python套接字socket通信
2022/04/01 Python