浅析AngularJS自定义指令之嵌入(transclude)

　　AngularJS自定义指令的嵌入功能与vue的插槽十分类似，都可以实现一些自定义内容展现。在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transclude。

　　transclude:
            true: 表示指令元素内容（子元素）会被嵌入。
            element: 表示整个元素会被嵌入，包括哪些尚未被编译的属性指令。ng-repeat指令就是这种模式
        ng-transclude：
            ng-transclude指令会得到嵌入元素，然后将嵌入元素追加到模板元素中ng-transclude所在的位置。这是嵌入最简单、最常见的用法。

　　ng-transclude类似于vue中的slot，指明自定义元素插入的位置。具体代码实现如下

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>transclude</title>
     <script src="https://cdn.bootcss.com/angular.js/1.3.1/angular.js"></script>
 </head>

 <body ng-app="transclude" ng-controller="TranscludeCtrl">
     <!-- 嵌入HTML片段作用域为ng-repeat产生的item的作用域，能够访问item里面的变量 -->
     <alert type="alert.type" close="closeAlert($index)" ng-repeat="alert in alerts">
         {{alert.msg}}
     </alert>
 </body>
 <script>
     var myApp = angular.module('transclude', []);
     myApp.controller('TranscludeCtrl', function($scope) {
         $scope.alerts = [{
             type: 'primary',
             msg: '你是谁'
         }, {
             type: 'default',
             msg: '不知道'
         }, {
             type: 'danger',
             msg: '真的假的'
         }];

         $scope.closeAlert = function($index) {
             $scope.alerts.splice($index, 1);
         }
     })
     myApp.directive('alert', function() {
         return {
             restrict: 'E',
             replace: true,
             transclude: true,
             template: `<div class="alert alert-{{type}}">
                 <button type="button" class="close" ng-click="close()">&times;</button>
                 <div ng-transclude></div>
             </div>`,
             scope: { //获取指令生效作用域变量
                 type: '=',
                 close: '&'
             }
         }
     })
 </script>

 </html>

运行结果如下：

如果设置transclude为element，它会将整个指令元素插入进去，运行结果如下：