angular学习笔记(三十)-指令(4)-transclude
本篇主要介绍指令的transclude属性:
transclude的值有三个:
1.transclude:false(默认值)
不启用transclude功能.
2.transclude:true
启用transclude,启用以后,有两个地方会发生变化:
①.使用指令的元素内部的所有内容都会被保存起来.不妨先把这一段内容称为一坨.
比如指令元素是这样的: <cd-hello><h3>code_bunny</h3></cd-hello>,那么,这一坨就是<h3>code_bunny</h3>
②.在指令的模板中,元素可以添加ng-transclude属性,添加了这个属性的元素,会被刚才的那一坨内容所填充.
比如模板是这样的:
<div><h2>hello</h2><div ng-transclude></div> </div>
使用后会变成:
<div><h2>hello</h2><div ng-transclude><h3>code_bunny</h3></div> </div>
需要注意的一点是,这一坨内容,应该是有标签的,如果是纯文本,没有标签,那么,它被放入ng-transclude元素以后,会自动添加span标签来包含文本内容:
比如指令元素是这样的: <cd-hello>code_bunny</cd-hello>
模板是这样的:
<div><h2>hello</h2><div ng-transclude></div></div>
那么使用后会变成:
<div><h2>hello</h2><div ng-transclude><span>code_bunny</span></div> </div>
下面举个栗子:
html:
<!DOCTYPE html> <html ng-app="dirAppModule"> <head><title>20.5指令</title><meta charset="utf-8"><script src="../angular.js"></script><script type="text/ng-template" id="text.html"><div><h3>{{title}}</h3><div ng-transclude></div></div></script><script src="script.js"></script><style type="text/css">*{font-family:'MICROSOFT YAHEI';font-size:12px}h3 {color:#CB2027}</style> </head> <body><input ng-model="title"/><br/><textarea cols="30" rows="4" ng-model="text"></textarea><div cd-text>{{text}}</div> </body> </html>
js:
/*20.5 指令 */ var appModule = angular.module('dirAppModule', []); appModule.directive('cdText',function(){return {restrict:'EAC',templateUrl:'text.html',replace:true,transclude:true} });
最后得到的结果:
可以看到,{{text}}被放在了有ng-transclude指令的div里,并且由于{{text}}没有被任何标签包含,它自动添加了span标签来包含它.
3.transclude:'element'
当transclude的值为'element'时(注意element就是element这个单词,而不是自己写元素名),基本上和ture用法是一致的,唯一的区别是,为true的情况下,那一坨是指令元素内部的内容,而为'element'时,那一坨是整个指令元素:
比如指令元素是这样的: <cd-hello><h3>code_bunny</h3></cd-hello>,那么,这一坨就是<cd-hello><h3>code_bunny</h3></cd-hello>
值得注意的是,虽然cd-hello这个元素本身就是个指令元素,它会被模板内容填充(或替换),但是,当它作为ng-transclude的一坨被插入到ng-transclude的元素里,是不会再应用cd-hello指令,无限次被替换下去进入死循环的...
还是2的栗子,我们把transclude属性值改为'element'以后可以看到,所有的效果都是不变的,唯独ng-transclude指令元素里的一坨变为整个cd-text元素:
4. transclude()函数
在一个模板里,ng-transclude指令只能被使用一次.所以,如果需要重复使用那一坨,需要使用transclude()函数,这个函数分别可以出现在以下三个地方:
1.控制器里,通过依赖注入 $transclude
2.link属性的函数的第五个参数.只要顺序是在第五个,名字取什么不重要,一般就取transclude
3.compile属性的函数的第三个参数.只要顺序是在第三个,名字取什么不重要,一般就取transclude
transclude()的用法是进阶话题,需要理解angular的编译,链接,指令的作用域.并且,只有ng-repeat这类指令才会用到.故这里先放一放,日后再深入研究.
参考文档:http://www.html-js.com/article/1869
完整代码:https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.5%20%E6%8C%87%E4%BB%A4.html
https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js
转载于:https://www.cnblogs.com/bonelee/p/7169040.html
angular学习笔记(三十)-指令(4)-transclude相关推荐
- tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...
- Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
- 【Unity 3D】学习笔记三十六:物理引擎——刚体
物理引擎就是游戏中模拟真是的物理效果.如两个物体发生碰撞,物体自由落体等.在unity中使用的是NVIDIA的physX,它渲染的游戏画面很逼真. 刚体 刚体是一个很很中要的组件. 默认情况下,新创的 ...
- angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({transfor ...
- [傅里叶变换及其应用学习笔记] 三十. 拉东变换
X射线断层摄影术(Tomography) 在商业上有两种不同的成像方法:CT.MRI,两种方法在实现方法上有部分相通的地方,这里讲述的是CT. 假设上图为一个身体剖面图,内含有各种粘性物质,如骨头.肌 ...
- tensorflow学习笔记(三十四):Saver(保存与加载模型)
Saver tensorflow 中的 Saver 对象是用于 参数保存和恢复的.如何使用呢? 这里介绍了一些基本的用法. 官网中给出了这么一个例子: v1 = tf.Variable(..., na ...
- 软件工程之美学习笔记三十八 37 | 遇到线上故障,你和高手的差距在哪里?
<软件工作之美>材料地址:https://time.geekbang.org/column/article/97219 遇到线上故障,新手和高手的差距在哪里? 新手遇到复杂的线上故障,不知 ...
- 学习笔记三十:IO流(二)
你应将心思精心专注于你的事业上.日光不经透镜屈折,集于焦点,绝不能使物体燃烧.--毛姆 本讲内容:文件流 例一:图片或者文件的拷贝(注意:用的是文件字节流 ) 思路:先把图片读入到内存然后写入到某个文 ...
- JAVA学习笔记(三十九)-打印流
import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.PrintStream; i ...
最新文章
- excel取整函数_数据分析小白学习之路(三)——Excel多练熟能生巧
- 转adb Shell root 权限
- CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
- [Leedcode][JAVA][面试题 01.07][找规律][旋转数组]
- JSP--(使用请求转发的动作标识jsp:forward)
- 笨方法“学习python笔记之条件控制
- CSS文件开头到底声明@charset utf-8
- 层间距离对ct图像的影响_CT专业知识掌握基础、了解原理
- 五角星是不是旋转对称图形_新部编二年级下册数学第10单元总复习教案,克和千克、图形的运动...
- 基于zookeeper实现分布式读写锁
- 吴恩达深度学习——编程1
- Mobile Terminal 316s-7 使用技巧
- Leetcode 20有效的括号、33搜索旋转排序数组、88合并两个有序数组(nums1长度为m+n)、160相交链表、54螺旋矩阵、415字符相加(不能直接转Int)、reverse()函数
- 那些年 我们一起追过的DIY三大件
- ffplay flv mp4 转_FLV与MP4格式视频转换
- 怎么注册微软云服务器,如何创建和部署云服务(经典) | Microsoft Docs
- 尝试阅读和理解 PairRE: Knowledge Graph Embeddings via Paired Relation Vectors
- 怎么在python官网下载python,python的官方网址是什么
- 一起飞系列之:腾讯云配置Ubuntu16.04, Nginx, PHP 7, MySql, PhpMyAdmin, 域名
- springboot框架开发的多商家在线商城系统
热门文章
- Linux平台下的内存泄漏检测
- 拉勾网《32个Java面试必考点》学习笔记之一------Java职业发展路径
- cin lt lt c语言,编写程序:从键盘输入n(0lt;nlt;100)个整数,计算并输出其中出现次数最多且数值最大的元...
- 作业帮冯雪胡不归问题_作业帮推出辅导老师“家庭陪伴计划” 让教育更有温度|讲题...
- 电感发出声音怎么解决_开关电源有“声音”可以这样解决-电源啸叫解决方案...
- java volatile 多线程_Java多线程之volatile
- Java单例模式代码实现方式
- “重金求来”Alibaba技术官并发编程笔记,附赠复习资料
- 【Java Web开发指南】解析Spring中Ioc和DI(入门Demo)
- python【蓝桥杯vip练习题库】ADV-351比大小