angular自定义指令中的transclusion以及自定义指令的嵌套
初衷写这篇文章的初衷有以下几点：
事先声明
前提首先，还不知道ng自定义指令的童鞋请戳这篇文章。 其次，还不知道ng自定义指令中的transclusion是啥玩意童鞋请戳这篇文章。 好了，到这里，我们正式再次进入主题。 transclusion的值我们先创建一个app,代码如下 var app=angular.module('myApp',[]);
app.controller("testController",function($scope){
});
我们都知道transclusion是自定义指令的的配置项，它的值有以下几种情况：
transclusion为boolean时好了，先来说说其值为boolean类型的时候吧。 app.directive('popSelect',[function(){
return {
restrict: 'AE',scope:{
},transclude:true,replace:true,template:
'<div>'+
'<div>'+
'<input type="text" ng-model="input" ng-focus="hasDate=true"/>'+
'</div>'+
'<div ng-transclude></div>'+
'<div>这是popselect指令的内容</div>'+
'</div>',link:function(scope,elem,attrs){
}
}
}]);
大家应该有看到在template里面多了一个东西是'<div ng-transclude></div>'，看到就可以了，在这里留个悬念。 既然是自定义指令的嵌套，那好歹也要有两个指令吧，废话不多说，再创建一个指令，此指令作为儿子被别人嵌套，而上面那个嵌套别人的指令我们叫做父亲。代码如下： app.directive('childElem',[function(){
return {
restrict: 'AE',template:'<div>'+
'<div>这是child指令的内容</div>'+
'</div>',attrs){
}
}
}])
父亲和儿子都创建完成了，那我们来看看html里面是怎么嵌套了。直接上代码： <pop-select>
<child-elem></child-elem>
</pop-select>
没错，html就是这么简单就可以了，看看页面是啥效果：
看到没，儿子的template内容被嵌入进父亲的template（姑且认为是template吧），那么它被嵌入到父亲的template的哪里了呢，我们看看控制台。
大家有没有发现什么，上图红框中的位置是不是恰好就是父亲的template的'<div ng-transclude></div>'这句话所在位置呀。
现在大家自动transclude:true怎么用了吧。 transclusion为object时这里有人就要问了：你这是嵌套一个儿子啊，如果我家钱多，我土豪，我要生很多个儿子那怎么办？ 那此时就要使用transclude的值为object了。废话不多说再次上代码。 app.directive('parentDirective',[function(){
return {
restrict: 'AE',transclude:{
'child1':"childElem",'child2':"childElem2",'child3':"childElem3"
},template:
'<div>'+
'<div>'+
'<input type="text" ng-model="input" value="这是parant指令"/>'+
'</div>'+
'<div ng-transclude="child2"></div>'+
'<div ng-transclude="child3"></div>'+
'<div ng-transclude="child1"></div>'+
'</div>',attrs){
}
}
}]);
大家注意到这一次父亲的transclude是一个对象 {
'child1':"childElem",'child3':"childElem3"
}
在父亲的template中还有这样三句话： '<div ng-transclude="child2"></div>'+
'<div ng-transclude="child3"></div>'+
'<div ng-transclude="child1"></div>'+
大家可能注意到这三句话中的child1，child2，child3怎么和父亲的transclude值中的三个属性child1，child2，child3一毛一样啊。猜猜呗，我想有人应该知道是怎么玩了。 那父亲的transclude值中的childElem，childElem2，childElem3这三个是啥玩意？别急嘛。这不，父亲还没有儿子吗？来，给他三个儿子。 首先是大儿子： app.directive('childElem',attrs){
}
}
}])
然后是二儿子： app.directive('childElem2',template:'<div>'+
'<div>这是childElem2指令的内容</div>'+
'</div>',attrs){
}
}
}])
最后是三儿子： app.directive('childElem3',template:'<div>'+
'<div>这是childElem3指令的内容</div>'+
'</div>',attrs){
}
}
}])
儿子们到齐了，接下来就该html了。继续上代码： <parent-directive>
<child-elem></child-elem>
<child-elem2></child-elem2>
<child-elem3></child-elem3>
</parent-directive>
那么页面效果是啥样子呢？看下图：
看，三个的儿子的内容和父亲的内容都显示出来了。 让我们再看看控制台：
三个红框中的内容就是三个儿子的template了。
好了，还没有不明白的么。如果不明白请看第二遍。哈哈、 全部示例代码最后，附上本例中的全部代码。 <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body ng-controller="testController">
<h1>嵌套一个指令</h1>
<pop-select>
<child-elem></child-elem>
</pop-select>
<h1> </h1>
<h1>嵌套多个指令</h1>
<parent-directive>
<child-elem></child-elem>
<child-elem2></child-elem2>
<child-elem3></child-elem3>
</parent-directive>
</body>
<script src="https://staticfile.qnssl.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller("testController",function($scope){
});
app.directive('popSelect',[function(){
return {
restrict: 'AE',scope:{
},template:'<div>'+
'<div><input type="text" ng-model="input" ng-focus="hasDate=true"/></div>'+
'<div ng-transclude></div>'+
'<div>这是popselect指令的内容</div>'+
'</div>',attrs){
}
}
}]);
app.directive('childElem',attrs){
}
}
}])
app.directive('parentDirective',attrs){
}
}
}]);
app.directive('childElem2',attrs){
}
}
}])
app.directive('childElem3',attrs){
}
}
}])
</script>
</html>
谢谢大家的耐心观看。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |