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'
    })
}
}            
});

templateURL：

<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

你的指令有错误，这可能就是它没有渲染任何内容的原因。

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

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

除此之外，它被正确定义。

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

plunker

Answer 2

ng-transclude需要一些东西来转换。没有上下文调用指令意味着什么。

这是一个提供更多信息的小提琴。

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,

Angular.js ng-trasclude不拾取被抄送的内容

2 个答案: