另一个排除指令内的角度排除指令

Question

>我在另一个指令中有一个角度指令。两者都使用transclude: true .

我希望如果我有以下代码（取自 plunker），我会看到同样的事情 3 次。

https://plnkr.co/edit/iIyU65WdMr4jDQyKZpt1?p=preview

.JS：

angular.module('app', [])
.directive('myButton', myButton)
.directive('directiveWithDirective', directiveWithDirective)
.directive('directiveWithDiv', directiveWithDiv);
function myButton(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<button ng-transclude> </button>'
        };
}
function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button ng-transclude> </my-button>'
        };
}
function directiveWithDiv(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-transclude> </div>'
        };
}

.HTML：

<div ng-app="app">
  <my-button>
    A Button
  </my-button>
  <br>
  <directive-with-directive>
    A Button
  </directive-with-directive>
  <br>
  <directive-with-div>
    <div>
      <my-button>
        A Button
      </my-button>
    </div>
  </directive-with->
</div>

my-button和directive-with-div的行为符合我的预期。它们将其内容包含在模板中。

但是，directive-with-directive没有。我希望文本"一个按钮"包含在my-button中，然后my-button扩展为一个按钮。相反，我看到一个空白指令：

<my-button ng-transclude=""> </my-button>.

我期待

<my-button ng-transclude=""><button>A Button</button> </my-button>

我的问题是：

我对此有什么误解？它是否与指令按角度扩展的顺序有关？我可以更改此设置吗？

我怎样才能在另一个被排除的指令中实现一个带有嵌入的指令。

Answer 1

我认为你可以用这个解决你的问题：

function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button><ng-transclude /> </my-button>'
        };
}