首页 > 代码库 > angular中transclude的理解

angular中transclude的理解

2024-09-28 15:27:02   217人阅读

　　今天被这个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>

 

angular中transclude的理解


联系
我们