angularJS 自定义指令间的相互交互
来源:互联网 发布:olay博研诗 知乎 编辑:程序博客网 时间:2024/05/21 04:43
angularJS 自定义指令间的相互交互
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>
页面结果展示:
在自定义指令当中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>
页面结果展示:
0 0
- angularJS 自定义指令间的相互交互
- 《AngularJS》--指令的相互调用
- AngularJS 优雅的自定义指令
- angularjs自定义指令的用法
- angularjs 自定义指令的分类
- angularJS-创建自定义的指令
- angularjs指令之间的数据交互
- AngularJS 世界------Angularjs指令的使用方式和自定义指令
- angularjs之间如何实现指令和指令之间的交互
- angularjs之间如何实现指令和指令之间的交互
- angularjs的自定义指令的scope
- angularjs自定义指令的样式如何设置
- angularjs的自定义指令及其调用方式
- angularJs自定义指令的scope配置详解
- AngularJs-指令和控制器交互
- AngularJs-指令和控制器交互
- angularJS自定义指令
- AngularJS自定义指令标签
- C语言习题5.11--判断三角形
- Android 蓝牙开发之搜索、配对、连接、通信大全
- python命名规范
- 一个周末掌握IT前沿技术之node.js篇<一>:Node.js与javascript
- C++编译器生成的默认函数
- angularJS 自定义指令间的相互交互
- 面向对象程序设计上机练习十二(运算符重载)
- win10 64位安装redis 及Redis Desktop Manager使用
- 注册表删除键值时拒绝访问
- Vi/Viim查找替换方法
- Java并发编程中——线程安全
- 微信小程序开发文档
- UVA 11572 Unique Snowflakes .
- 机器学习网站收集