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/