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包含指令内容不起作用

1 个答案: