详解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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php设计模式之单例模式代码
2016/06/11 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
浙大毕业生自荐信
2014/01/26 职场文书
2015年读书月活动总结
2015/03/26 职场文书
爱护环境建议书
2015/09/14 职场文书
2016国培研修心得体会
2016/01/08 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
Django drf请求模块源码解析
2021/06/08 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server