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>' 

    }; 

}); 

これは基本的に、私は親ディレクティブを持ちたい、と2つのつの子ディレクティブでしょうjsfiddleリンクhttps://jsfiddle.net/c8gscx3t/2/

です属性を介して親ディレクティブの内容を変更することができます。こうすることで、special2のスペシャルかどうかにかかわらず、myDirectiveをページ上に配置し、属性を介して制御できます。

ここに角のnoobがありますので、より良いアプローチをお勧めします。

Answer 1

あなたが同じタグでテンプレートと2つのディレクティブを持つことができない、これを試してみてください。

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