详解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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
JS实现网页时钟特效
Mar 25 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中使用数组指针函数操作数组示例
2014/11/19 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
图片自动更新(说明)
2006/10/02 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Python编写一个优美的下载器
2018/04/15 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
五年级音乐教学反思
2014/02/06 职场文书
国防教育标语
2014/10/08 职场文书
领导参观欢迎词
2015/01/26 职场文书
红色电影观后感
2015/06/18 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python