angular指令的transclude选项以及ng-transclude指令

时间 2019-11-09

标签 angular 指令 transclude 选项以及栏目 AngularJS 繁體版

原文原文链接

今天咱们来研究一下如何使用ng-transclude指令,以及指令的transclude选项；首先要说明咱们使用的angular的版本是1.5.0，由于不一样版本的表现结果不是那么相同。html

首先咱们应该了解到，在angular指令的选项中，有一项是transclude，这个选项有三种值：false，true，object；那这三种值分别表示什么，该如何选择？下面咱们来详细的说明一下。angularjs

transclude字面意思就是嵌入，也就是说你需不须要将你的指令内部的元素（注意不是指令的模板）嵌入到你的模板中去，默认是false。若是你须要这种功能的话，那么就须要将transclude设置为true或者{...}。若是将这个值设置为true或者{...}的话，那么就要配合angular的ng-transclude指令来进行使用，好，废话很少说了，看代码是最好的学习方法，咱们下面就来根据代码来了解掌握这些东西。app

代码的结果能够在这里看到，完整的代码会在后面贴出来，如今咱们来看第一个指令部分学习

在页面中使用的形式this
```

<one-transclude class="one-transclude-self">
    <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</one-transclude>
```
咱们定义了一个名字叫作one-transclude的指令，也就是说这个指令的模板中只有一个嵌入点的，指令内部是有一些元素的我给内部的元素的内容作了一些标记，方便咱们后面观察。spa

JavaScript代码部分rest

angular.module('app', [])
    .directive('oneTransclude', oneTransclude);

function oneTransclude() {
    return {
        restrict: 'AE',
        transclude: true,
        templateUrl: 'one-transclude.html'
    };
}

咱们在JavaScript中定义oneTransclude，注意咱们这里transclude=true，代表咱们但愿在模板中将指令的内部元素嵌入到模板中的某个位置。code

指令的模板部分htm
```
<div class="one-transclude">
    <div class="one-transclude__title">
        $BBBBBB$ 我是指令[one-transclude]模板的内容
    </div>
    <hr>
    <ng-transclude>
        $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
     </ng-transclude>
</div>
```
上面书写了咱们的指令模板，能够看到咱们的模板由两部分组成，一部分是含有ng-transclude指令的，一部分是不含有这个指令的。固然我也把这些里面的内容做了一些标记，方便后面咱们观察。由于这里的ng-transclude后面不带有参数，因此指令里面的元素就是那些以$AAAAAA$开头的整块元素都会嵌入到指令模板中含有ng-transclude指令的内部，还要注意，若是指令模板中含有ng-transclude指令的元素内部也有元素的话，那么这些元素会被替代。还有一种状况，那就是若是指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的内部元素会显示出来对象
咱们能够看下图更直观的了解一下。

多个嵌入点的状况，这时候指令内部的ng-transclude的值是一个对象，一种映射关系；具体的能够看下面的代码：

指令在页面中使用的代码：

<!-- 指令mutil-transclude -->
<multi-transclude>
    <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
    <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
    <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

咱们在页面中使用了multi-transclude这个指令，在指令的内部还有三个指令，这内部的三个指令要以E的形式应用，否则会出现问题，看到这里不明白的不要紧，继续往下看。

JavaScript代码中的指令：
```
angular.module('app', [])
    .directive('multiTransclude', multiTransclude);
    
function multiTransclude() {
    return {
        restrict: 'AE',
        transclude: {
            'title': 'multiTranscludeTitle',
            'body': 'multiTranscludeBody',
            'footer': '?multiTranscludeFooter'
        },
        templateUrl: 'multi-transclude.html'
    };
}
```
咱们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应，拿'footer': '?multiTranscludeFooter'来解释一下，footer对应指令模板中的一个嵌入点，multiTranscludeFooter对应指令元素内部的哪一个multi-transclude-footer指令，前面的?表示这个嵌入点不必定有对应的指令存在。固然multiTranscludeFooter是咱们本身定义的，能够随意定义，可是尽可能作到让你们一看就知道是对应哪一个嵌入点就行。

指令对应的模板

<div class="multi-transclude">
    <div class="multi-transclude__title" ng-transclude="title"></div>
    <div>忽略我,我就是证实我是在模板中的1</div>
    <div class="multi-transclude__body" ng-transclude="body"></div>
    <div>忽略我,我就是证实我是在模板中的2</div>
    <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

从上面的模板中咱们能够看到，指令ng-transclude后面的字符串就是咱们定义的嵌入点，也就是上面指令定义时候用到的那些字符串。

到这里关于ng-transclude以及angular指令的transclude选项我想你们应该都明白了。

完整的代码部分

index.html

<body ng-controller="MyController as vm">

<h1 ng-bind="vm.title"></h1>

<h2>指令one-transclude 内部含有元素</h2>
<!--  指令one-transclude 内部含有元素-->
<one-transclude class="one-transclude-self">
    <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</one-transclude>


<h2>指令one-transclude 内部不含有元素</h2>
<!-- 指令one-transclude 内部不含有元素 -->
<one-transclude class="one-transclude-self"></one-transclude>

<h2>指令mutil-transclude</h2>
<!-- 指令mutil-transclude -->
<multi-transclude>
    <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
    <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
    <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

</body>

app.js

(function() {
angular.module('app', [])
    .controller('MyController', myController)
    .directive('oneTransclude', oneTransclude)
    .directive('multiTransclude', multiTransclude);

myController.$inject = [];

function myController() {
    var vm = this;
    vm.title = 'ng-transclude';
}

function oneTransclude() {
    return {
        restrict: 'AE',
        transclude: true,
        templateUrl: 'one-transclude.html'
    };
}

function multiTransclude() {
    return {
        restrict: 'AE',
        transclude: {
            'title': 'multiTranscludeTitle',
            'body': 'multiTranscludeBody',
            'footer': '?multiTranscludeFooter'
        },
        templateUrl: 'multi-transclude.html'
    };
}
})();

one-transclude.html

<div class="one-transclude">
    <div class="one-transclude__title">
        $BBBBBB$ 我是指令[one-transclude]模板的内容
    </div>
    <hr>
    <ng-transclude>
        $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
    </ng-transclude>
</div>

multi-transclude.html

<div class="multi-transclude">
    <div class="multi-transclude__title" ng-transclude="title"></div>
    <div>忽略我,我就是证实我是在模板中的1</div>
    <div class="multi-transclude__body" ng-transclude="body"></div>
    <div>忽略我,我就是证实我是在模板中的2</div>
    <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>