AngularJS - 包含嵌套属性指令的内容

Question

是否可以包含作为属性传递的嵌套 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 的特殊。

这里有棱角分明的菜鸟，所以请随时提出更好的方法。

Answer 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/