javascript - 带有 ng-transclude 的指令将 html 包装在 ng-transclude 元素中

Question

我在模板中有一个带有 ng-repeat 的指令，但我还想在中继器后面有一个 ng-transinclude 以允许用户插入自己的内容。问题是自定义内容在渲染时被包装在 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

您可以使用传递给指令的 comtroller 和 link 函数的 transinclude 函数(在您的情况下，link 函数，无论如何这是更推荐的方法)Angular docs .
您将获得嵌入内容的克隆，您可以用它做任何您想做的事情:

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 起已被弃用