帶有ng-transclude的指令將html包裝在ng-transclude元素中

Question

我在模板中有一個帶有ng-repeat的指令，但是我也希望在轉發器之后有一個ng-transclude，以允許用戶插入自己的內容。 問題在於，自定義內容在呈現時包裝在ng-transclude元素中，我不希望這樣。

指示：

    angular.module("MyModule", [])
  .directive('myDirective', [function () {
    return {
      restrict: 'EA',
      transclude: true,
      replace: true,
      scope: {},
      templateUrl: 'templates/template_view.html',
      link: function (scope, element, attrs) { 
        scope.nodes = [
          {
            "imageSource": "",
            "title": "Sample Title",
            "body": "Lorem ipsum and some other stuffs",
            "readMore": "",
            "date": "Mar 20"
          }
        ];

      }
    };
  }]);

模板：

<section>
  <div class="someClass" ng-repeat="node in nodes">
    <div>
      <img src="{{node.imageSource}}" alt="Picture">
    </div>
    <div class="content bounce-in">
      <h2>{{node.title}}</h2>
      <p>{{node.body}}</p>
      <a href="{{node.readMore}}" ng-show="{{node.readMore}}">Read more</a>
      <span>{{node.date}}</span>
    </div>
  </div>
  <div ng-transclude></div>
</section>

采用：

<div my-directive>
  <div class="someClass">
    <h2>Title of section 1</h2>
    <p>Lorem ipsum dolor </p>
    <span class="cd-date">Jan 14</span>
  </div>
  <div class="someClass">
    <h2>Title of section 2</h2>
    <p>Lorem ipsum dolor</p>
    <span class="cd-date">Jan 18</span>
  </div>
</div>

得到什么輸出：

<section my-directive="">
  <!-- ngRepeat: node in nodes -->
  <div class="someClass" ng-repeat="node in nodes">
    <div>
      <img src="" alt="Picture">
    </div>

    <div class="content bounce-in">
      <h2>Sample Title</h2>
      <p>Lorem ipsum and some other stuffs</p>
      <a href="" ng-show="">Read more</a>
      <span>Mar 20</span>
    </div>
  </div>
  <!-- end ngRepeat: node in nodes -->
  <div ng-transclude="">
    <div class="someClass">
      <h2>Title of section 1</h2>
      <p>Lorem ipsum dolor</p>
      <span class="cd-date">Jan 14</span>
    </div>
  </div>
  <div class="someClass">
    <h2>Title of section 2</h2>
    <p>Lorem ipsum dolor </p>
    <span class="cd-date">Jan 18</span>
  </div>
  </div>

  </div>
</section>

我不希望<div ng-transclude>元素包裝被包含的數據。

Answer 1

您可以利用的transclude傳遞給你的指令的功能comtroller和link功能（在你的情況下， link功能，反正是比較推薦的做法） 角文檔 。
您獲得了被包含內容的clone ，您可以使用它做任何您想做的事情：

 angular.module("MyModule", []) .directive('myDirective', [function () { return { restrict: 'EA', transclude: true, replace: true, scope: {}, templateUrl: 'templates/template_view.html', link: function (scope, element, attrs, ctrls, transcludeFn) { scope.nodes = [ { "imageSource": "", "title": "Sample Title", "body": "Lorem ipsum and some other stuffs", "readMore": "", "date": "Mar 20" } ]; transcludeFn(function (clone) { element.find('a-selector-for-the-ng-translude-element').after(clone).remove(); }); } }; }]); 

尚未測試以上代碼...

另外，重新考慮一下replace: true的使用，因為自Angular 1.3起已棄用