angularJS transclude
参考来源:彻底弄懂AngularJS中的transclusion
对以上文章进行摘录、总结和测试记录
在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion。
指令的DDO中,transclude有三个值: transclude: false |true | '
element' ;
第一个是默认值,后两个有什么区别呢?
transclude:'element'
//TODO
transclude:true
<body ng-app="app">
<dx>
这是子元素
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function() {
return {
transclude:true,
template:'<div> 1233 <div ng-transclude></div> </div>'
}
});
</script>
运行结果:子元素会被嵌入进 <div ng-transclude></div> 里,而且拥有自己的作用域【后面会讲到这个作用域用来干嘛的】
可以发现,模板中的ng-tranclude决定了在什么地方放置嵌入部分。
以上仅仅只是嵌入了一次,如果我希望多次嵌入,怎么办?
在代码中使用transclude。如下:
link函数的第五个参数、compile函数的第三个参数、依赖注入的$transclude。三者用法一致(前两种用法中要求必须在DDO中打开transclude,如transclude:true,否则获取到的transclude为undefined)。以link为例:
1.执行transclude函数,获取子元素
<body ng-app="app">
<dx>
这是子元素
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function() {
return {
transclude:'true',
link:function(scope,ele,sttr,ctrl,transclude){
var sub = transclude();
for(var i = 0;i<3;i++){
ele.append(sub.clone());
}
}
}
});
运行结果如下,测试过程中发现在for循环运行之前,dx中的子元素被清空了,
2.给transclude传递两个参数
将以上案例修改如下:
app.directive('dx',function() {
return {
transclude:'true',
link:function(scope,ele,sttr,ctrl,transclude){
transclude(scope,function(sub){
for(var i = 0;i<3;i++){
ele.append(sub.clone());
}
});
}
}
});
运行效果没有发生任何变化。第二个参数中的sub,也还是当前指令的子元素。
上面说过获取到的子元素都是有自己的作用域,第一个参数scope是这个子元素的上下文环境,子元素的作用域会继承这个上下文环境。
例子:
<body ng-app="app">
这是外部的name:{{name}}
<dx>
这是我自定义的:{{name}}
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function() {
return {
transclude:'true',
link:function(scope,ele,sttr,ctrl,transclude){
scope.name = 7777;
var myScope = scope.$new();
myScope.name = 1233;
transclude(myScope,function(sub){
ele.append(sub);
});
}
}
});
</script>
运行结果:这是外部的name:7777 这是我自定义的:1233
以上通过new从当前的作用域中衍生出一个新的作用域(新的作用域继承自当前作用域)。然后对新的作用域进行数据修改,最后应用到子元素上。
对获取到的子元素进行进一步理解:
<dx>
这是我自定义的:{{name}}
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function() {
return {
transclude:'true',
link:function(scope,ele,sttr,ctrl,transclude){
var myScope = scope.$new();
myScope.name = 1233;
transclude(myScope,function(sub){
for(var i = 0;i<3;i++){
ele.append(sub.clone());
}
});
}
}
});
</script>
运行结果:这是我自定义的:{{name}} 这是我自定义的:{{name}} 这是我自定义的:{{name}}
显然这不是我们想要的,而且为什么会出现这样的结果?
因为我们在循环中添加的只是克隆体,或者直接理解为添加的仅仅是一坨html而已,这和angular没有任何关系,自然也就不存在数据绑定的说法,所以文本就直接显示出来了。
解决办法就是让这一坨html与angular扯上关系,进行手动编译,注入$compile服务,然后修改循环如下:
transclude(scope,function(sub){
for(var i = 0;i<3;i++){
var clone = sub.clone();
$compile(clone)(myScope);
ele.append(clone);
}
});
以上transclude的第一个scope实际上已经没用了,因为手动编译的时候,我们指定了这个被编译元素的上下文,编译过程就会只读取这个上下文了。
总结:transclude的第一个scope仅仅针对sub本身是有用的,而对于sub的克隆体来说没有任何用处
angularJS transclude的更多相关文章
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive
var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...
- AngularJS transclude 理解及例子
一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- AngularJs directive 'transclude' option 详解
transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...
- angularjs作用域之transclude
transclude是一个可选的参数.如果设置了,其值必须为true,它的默认值是false.嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常好的配合.使用嵌入也会很好 ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJs 中的transclude的理解
Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentatio ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
随机推荐
- 如何阻止浏览器的默认事件,你是否也遇到过无法阻止Google默认事件的情况( 原生JS )
如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...
- git apply
1. git 安装 2.git 与服务器的验证 1.生成ssh ssh-keygen -t rsa -C "1107247128@qq.com" 2.查看生成的pub文件, ...
- Win10各个版本免费激活密钥
专业版:W269N-WFGWX-YVC9B-4J6C9-T83GX 企业版:NPPR9-FWDCX-D2C8J-H872K-2YT43 家庭版:TX9XD-98N7V-6WMQ6-BX7FG-H8 ...
- python操作pymongo
import pymongo from bson import ObjectId mongo_client = pymongo.MongoClient(host="127.0.0.1&quo ...
- 使用Ctex中遇到的一些问题
一般下载好Ctex,我是使用Latex+dvi2pdf完成编译的,但是发现推荐的使用为:1)运行CCT & Latex命令生成两次dvi和ps文件 2)使用dvi2pdf编译dvi文件生成pd ...
- 剪花布条 HDU - 2087
剪花布条 HDU - 2087 要求各个匹配出来的子串不重叠的kmp.实际上直接贪心从前往后找,每找到一个就把当前j标为0即可.(一般kmp是标为f[j]) #include<cstdio> ...
- 那些坑爹的python面试题
python基础知识思维导图 MyProcessOn Python基础: 说说你眼中的python( 2 ) 谈谈你对python和其他语言的区别 1. python 中,变量是以内容为基准而不是像 ...
- 如何轻松实现MySQL数据库的读写分离和负载均衡?
配置好了 Mysql 的主从复制结构后,我们希望实现读写分离,把读操作分散到从服务器中,并且对多个从服务器能实现负载均衡.读写分离和负载均衡是 Mysql 集群的基础需求,MaxScale 就可以帮着 ...
- hadoop的安装和配置
hadoop安装 在Apache Hadoop主页的下载页面https://hadoop.apache.org/releases.html选择版本进行下载: 下载下来的是压缩包: 将压缩包使用Xftp ...
- prevent to do sth 与 prevent sb (from) doing 用法
prevent to do sth 如: Do not water in before making a turn every time 9 days, make wilting of its bra ...