Angular.js ng-trasclude 没有提取嵌入的内容

Question

我的指令中有一个简单的 ng-transclude；然而，嵌入的内容没有被提取。下面的代码有什么问题吗？

指令：

app.directive('modal', function($document){
return{
  templateUrl: "../templates/modal.html",
  restrict: "E",
  scope:{
      modalOpen: '=open',
      options: '=',
      onClose: '&'
    },
    transclude: true,
    templateUrl: '../templates/modal.html',
    controller: function($scope){
      $scope.close = function(){
        $scope.modalOpen = false;
        $scope.onClose();
      }
    },
    link: function($scope, el){

  var options = angular.extend({
    height: '250px',
    width: '500px',
    top: '20%',
    left: '30%'
  }, $scope.options);

  el.find('.modal-container').css({
    'left': options.left,
    'top': options.top,
    'height': options.height + 'px',
    'width': options.width + 'px'
  })

  var pageHeight = $document.height();
  var pageWidth = $document.width();
    el.find('modal-blackout').css({
      'width': pageWidth + 'px',
      'height': pageHeight + 'px'
    })
}
}            
});

模板网址：

<div class="modal-blackout" ng-show="modalOpen">
<div class="modal-container">
    <a class="modal-close" ng-click="close()">X</a>
      <ng-transclude></ng-transclude>
  </div>
</div>

查看：

<modal open="modalOpen" options="{top:35, height:300}" on-close="modalClosed(response)">
     <div ng-controller="modalCtrl">
      <h1>Body</h1>
        <div class="" ng-click="close('yes')">Yes</div>
        <div class="" ng-click="close('no')">No</div>
    </div>
  </modal>

已渲染 html:

<modal open="modalOpen" options="{top:35, height:300}" on-close="modalClosed(response)" class="ng-scope ng-isolate-scope">
  <div class="modal-blackout" ng-show="modalOpen">
    <div class="modal-container" style="left: 30%; top: 35px; height: 300px;">
     <a class="modal-close" ng-click="close()">close</a>
      <ng-transclude></ng-transclude>
  </div>
</div>
</modal>

为什么 <ng-transclude></ng-transclude> 没有提取嵌入的内容？

Answer 1

ng-transclude 需要嵌入一些东西。在没有上下文的情况下调用指令没有任何意义。

这里是fiddle了解更多信息。

http://jsfiddle.net/ospatil/A969Z/158/light/

restrict: 'EA',
template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div><div class="transcluded" ng-transclude></div></div>',
replace: true,
transclude: true,

Answer 2

您的指令有错误，这可能是它不呈现任何内容的原因。

而不是使用 $document.height() - 它应该是 $document.height - 属性；不起作用。与 $document.width.

相同

（另外，它有重复的 templateUrl，但这不应该是原因）

除此之外，定义正确。

编辑： 另一个罪魁祸首可能是您正在使用的 angular 版本。仅在 1.3+ 中您可以使用元素形式 <ng-transclude> - 在早期版本中您必须使用属性形式 <div ng-transclude>

plunker

Angular.js ng-trasclude 没有提取嵌入的内容

Angular.js ng-trasclude not picking up transcluded content

angularjs

angularjs-directive