angular中transclude的理解
2024-08-30 18:30:30
今天被这个transclude搞糊涂了,弄了半天,才知道原来使用起来很简单。很烦恼为社么书中的对于这个的介绍这么晦涩难懂。直到看到了这篇文章,才让我弄清楚了。
一、transclude介绍
transclude是angular中自定义指令中的一个参数。中文就是嵌入的意思。也就是说通过这个参数设置,可以将指令内容嵌入到自定义指令中的模版中。其值默认是false,当为true时,会起到嵌入的作用。
二、使用
首先我们先看一下不使用tranclude的情况:
js:
app.directive('myDirective',function(){
return{
template : '<p>指令模版中的内容</p>'
}
}); html:
<div my-directive></div>
这是一段最简单的自定义指令代码,不用解释,都能懂。
在这个基础上,我脑洞一下,我在html的自定义指令标签中随意添加点什么东西会怎样呢?
js:
app.directive('myDirective',function(){
return{
template : '<p>指令模版中的内容</p>'
}
}); html:
<div my-directive>这是指令中的内容</div>
结果也很容易知道。最后html中的代码是:
<div my-directive>
<p>这是指令模版中的内容</p>
</div>
也就是说最后执行的结果是指令模版中的内容将指令中的代码进行了覆盖。
那么问题来了,如果我想把指令中的内容嵌入到指令模版中,怎么办?这个时候就需要用到transclude了。实现的方法如下:
app.directive('myDirective',function(){
return{
transclude : true,
template : '<p ng-transclude>指令模版中的内容</p>'
}
});
其中橙色的地方是需要增加的,在模版中,ng-transclude的作用就是告诉angular嵌入的位置。结果就是:
<div my-directive="">
<p ng-transclude="">
<span class="ng-scope">这是指令中的内容</span>
</p>
</div>
span标签是系统自动生成的,具体作用还未了解,但是这不妨碍对transclude的探讨。
进一步,如果我们想把指令模版中的内容和指令中的内容都显示出来,可以这么做:
app.directive('myDirective',function(){
return{
transclude : true,
template : '<p>指令模版中的内容</p><br><p ng-transclude></p>'
}
});
结果就是
<div my-directive="">
<p>指令模版中的内容</p><br>
<p ng-transclude="">
<span class="ng-scope">span这是指令中的内容</span>
</p>
</div>
最新文章
- Linux 2.6内核中新的锁机制--RCU
- Netty系列之Netty高性能之道
- CSS_01_CSS和html结合的方式3、4
- seleniumRC启动及浏览器实例配置
- Android MediaPlayer播放一般音频与SoundPool播放短促的音效
- 文件上传~Uploadify上传控件~续(多文件上传)
- curl post参数,接口接收不到数据问题
- Git远程使用技巧
- LVS:DR模式(Direct Routing)部署实验
- spring html5 拖拽上传多文件
- javascript中字符串常用操作整理
- 学习笔记:javascript 窗口对象(window)
- C语言--嵌套循环
- Linux中“!";的神奇用法
- 洛谷 P1605 迷宫
- Php基本类型学习
- ROS 双目标定
- Easyui datagrid 去掉表头的checkbox复选框
- 装饰器 python 你也可以叫语法糖
- 当滚动列表的时候,让input框失去焦点(移动端会收起键盘)
热门文章
- hdu2157:How many ways??
- Python基础之 一 文件操作
- Linux下设置swappiness参数来配置内存使用到多少才开始使用swap分区(转)
- sql server2008 R2 各个版本的区别与选择
- USACO castle
- Solr 文章集成
- 图像配准建立仿射变换模型并用RANSAC算法评估
- windows下Python扩展问题error: Unable to find vcvarsall.bat
- 【iOS系列】-UIImageView帧动画相关属性介绍
- 【视频】零基础学Android开发:蓝牙聊天室APP(三)