AngularJS - 嵌入嵌套属性指令的内容答案

【问题标题】：AngularJS - Transclude content of nested attribute directiveAngularJS - 嵌入嵌套属性指令的内容
【发布时间】：2016-03-20 12:22:56
【问题描述】：

是否可以嵌入作为属性传递的嵌套 AngularJS 指令的内容？

这是 HTML

<div ng-controller="DemoCtrl">
  Hello test.
  <my-directive special/>
</div>

和指令：

var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){

}])
.directive('myDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        transclude: true,
        template: "<div>Hello, <div ng-transclude></div></div>"
    }

}).directive('special', function(){
    return {
        restrict: 'A',
        template: '<div>Special</div>'

    };

}).directive('special2', function(){
    return {
        restrict: 'A',
        template: '<div>Special2</div>'

    };

});

这是 jsfiddle 链接https://jsfiddle.net/c8gscx3t/2/

基本上，我想要一个父指令和两个子指令，它们可以通过属性更改父指令的内容。这样我就可以把myDirective放在页面上，通过属性控制它是否是special2的特殊。

这里是 Angular 新手，所以请随意提出更好的方法。

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

你不能在同一个标签中有两个带有模板的指令，试试这个：

<div ng-controller="DemoCtrl">
  <my-directive>
    <special></special>
  </my-directive>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){

}])
.directive('myDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        transclude: true,
        template: "<div>Hello <div ng-transclude></div></div>"
    }

}).directive('special', function(){
    return {
        restrict: 'AE',
        template: '<div>Special</div>'

    };

}).directive('special2', function(){
    return {
        restrict: 'A',
        template: '<div>Special2</div>'

    };

});

https://jsfiddle.net/c8gscx3t/3/

【讨论】：