使用 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,
      };
})

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

Wrap directive content with ng-transclude not working

javascript

angularjs

angular-ui-bootstrap