另一個transclude指令中的角度transclude指令

Question

我在另一個指令中有一個角度指令。 兩者都使用transclude: true 。

我希望如果我有以下代碼（摘自插棒），那么我會看到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>'
        };
}