angular自定义指令中的transclusion以及自定义指令的嵌套

2019年8月31日 112次阅读 来源: skycity

初志

写这篇文章的初志有以下几点：

1.近来项目中须要用到ng的自定义指令，而且还涉及到自定义指令的嵌套。
2.百度和谷歌找到的答案都不尽人意。

所以想着本身写一篇得了。

事前声明

事前申明，鄙人刚入前端4月有余，属于新蛋一枚，也是首次写博客（第一次就这么献给sf了。），我尽本身最大的勤奋把我想表达的意义表达出来。好了，空话不多说，直接奔入主体。

条件

起首，还不晓得ng自定义指令的童鞋请戳这篇文章。
http://www.cnblogs.com/lvdaba…
这篇文章分了上中下，三篇，讲ng自定义指令已很详细了。

其次，还不晓得ng自定义指令中的transclusion是啥玩意童鞋请戳这篇文章。
http://www.html-js.com/articl…
这篇文章采纳口语化的表达方式幽默的报告了作甚transclusion。

好了，到这里，我们正式再次进入主题。

transclusion的值

我们先建立一个app,代码以下

var app=angular.module('myApp', []);
app.controller("testController",function($scope){
    
});

我们都晓得transclusion是自定义指令的的设置项，它的值有以下几种状况：

1.boolean范例，也就是为true,或许false,固然，默以为false。
2.Object范例，可所以一个对象。
3.element范例，还可所以一个元素。（示意：我如今还没有玩过element。）

transclusion为boolean时

好了，先来说说其值为boolean范例的时刻吧。
建立一个自定义指令，设置其transclusion为true。代码以下：

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',
        replace:true,
        template:'<div>'+
                    '<div>这是child指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

父亲和儿子都建立完成了，那我们来看看html内里是怎样嵌套了。直接上代码：

<pop-select>
    <child-elem></child-elem>
</pop-select>

没错，html就是这么简朴就可以够了，看看页面是啥结果：

《angular自定义指令中的transclusion以及自定义指令的嵌套》

看到没，儿子的template内容被嵌入进父亲的template（权且以为是template吧），那末它被嵌入到父亲的template的那里了呢，我们看看控制台。

《angular自定义指令中的transclusion以及自定义指令的嵌套》

人人有无发明什么，上图红框中的位置是否是正好就是父亲的template的'<div ng-transclude></div>’这句话所在位置呀。

没错，只需你的指令中嵌套其他的指令，那末你在父亲的设置项中设置transclude:true，而且在template中你须要的处所加上'<div ng-transclude></div>'这句嵌套话，那末ng将自动把儿子的内容加入到'<div ng-transclude></div>'这个标签中来，请仔细看控制台红框的图片。

如今人人自动transclude:true怎样用了吧。

transclusion为object时

这里有人就要问了：你这是嵌套一个儿子啊，假如我家钱多，我土豪，我要生许多个儿子那怎样办？

那此时就要运用transclude的值为object了。空话不多说再次上代码。

app.directive('parentDirective',[function(){
  return {
     restrict: 'AE',
     transclude:{
         'child1':"childElem",
          'child2':"childElem2",
           'child3':"childElem3"
     },
     replace:true,
     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>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);

人人注意到这一次父亲的transclude是一个对象

         {
            'child1':"childElem",
            'child2':"childElem2",
            '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',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是child指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

然后是二儿子：

 app.directive('childElem2',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是childElem2指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

末了是三儿子：

app.directive('childElem3',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是childElem3指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

儿子们到齐了，接下来就该html了。继承上代码：

<parent-directive>
    <child-elem></child-elem>
    <child-elem2></child-elem2>
    <child-elem3></child-elem3>
</parent-directive>

那末页面结果是啥样子呢？看下图：

《angular自定义指令中的transclusion以及自定义指令的嵌套》

看，三个的儿子的内容和父亲的内容都显示出来了。

让我们再看看控制台：

《angular自定义指令中的transclusion以及自定义指令的嵌套》

三个红框中的内容就是三个儿子的template了。

人人如今应当邃晓了吧，没错。当父亲的transclude是一个对象时，那末属性名就是你本身起的名字， 值就是你须要嵌入的儿子的名字。然后你再在父亲的template内里写上'<div ng-transclude="你起好的属性名字"></div>'，如许ng就可以晓得你是想把儿子嵌入到父亲的那里了。

好了，还没有不邃晓的么。假如不邃晓请看第二遍。哈哈、

悉数示例代码

末了，附上本例中的悉数代码。

<!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>&nbsp;</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:{
            
        },
        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){
          
        }  
    }
}]);

app.directive('childElem',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是child指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

app.directive('parentDirective',[function(){
  return {
     restrict: 'AE',
     transclude:{
         'child1':"childElem",
          'child2':"childElem2",
           'child3':"childElem3"
     },
     replace:true,
     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>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}]);
app.directive('childElem2',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是childElem2指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])

app.directive('childElem3',[function(){
    return {
        restrict: 'AE',
        replace:true,
        template:'<div>'+
                    '<div>这是childElem3指令的内容</div>'+
                 '</div>',   
        link:function(scope, elem, attrs){
          
        }  
    }
}])
</script>
</html>

感谢人人的耐烦寓目。

    原文作者：skycity
    原文地址: https://segmentfault.com/a/1190000007554744
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞