如何创建包含其他指令的指令？

Question

我已经创建了一些像这样的新指令：

<admin-retrieve-button></admin-retrieve-button>
<admin-new-button></admin-new-button>
<admin-save-button></admin-save-button>
<admin-reset-button></admin-reset-button>

有没有办法可以创建另一个结合所有这些的指令？

Answer 1

你可以使用ng-transclude

app.directive("adminButtonGroup", function(){
   return {
     restrict: 'E'
     transclude: true,
      template: '<div class="btn-group"><div ng-transclude=""></div></div>'
    }
 });

如果您不想转换并拥有固定的按钮组，那么

  app.directive("adminButtonGroup", function(){
   return {
     restrict: 'E';
      template: '<admin-retrieve-button></admin-retrieve-button>' +
                  '<admin-new-button></admin-new-button>' +
                  '<admin-save-button></admin-save-button>' +
                  '<admin-reset-button></admin-reset-button';
    }
 });

如果你的孩子按钮想要用父按钮说话，你也可以使用require。

Answer 2

是。

创建一个包含这些标记的模板，然后通过将templateUrl属性设置为模板文件的路径，将其用于新指令中。