详解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调试(不下载任何工具)
Apr 14 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python数据结构之单链表详解
2017/09/12 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python模块 _winreg操作注册表
2020/02/05 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
总裁助理岗位职责
2014/02/17 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年度个人总结范文
2015/03/09 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Python开发五子棋小游戏
2022/04/28 Python