javascript - 使用 ng-transclude 包装指令内容不起作用

Question

我有以下指令

<modal title="Login form" visible="true">
    Modal content
</modal>

我有一个 modal.template.html我包含的文件 <ng-transclude></ng-transclude> :

<div class="modal">
   <div class="modal-header">
      <h3 class="modal-title">Title</h3>
   </div>
   <div class="modal-body">
      <ng-transclude></ng-transclude>              
   </div>
   <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
   </div>
</div>

我想替换 ng-transclude主页上设置的指令内容元素。所以我尝试了:

$app.directive('modal', function ($modal) {
  return {
    templateUrl: 'modal.template.html',
    controller: 'ModalController',
    restrict: 'E',
    transclude: 'element',
    replace: true,
    scope: true,
  };
});

它在主页上显示我的模板但不替换 ng-transclude指令内容的元素。我怎么可能理解错了ng-transclude有效。

FIDDLE HERE

Answer 1

ng-transclude 是属性指令不是元素指令。

app.directive('modal', function () {
      return {
          template: '<h1>Content: <span ng-transclude></span> - End Content</h1>',
        controller: 'ModalController',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
      };
})