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函数，无论如何都是更推荐的方法）Angular docs。
你得到了被转录内容的clone，你可以随心所欲地做任何事情：

＆＃13;

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();
        });

      }
    };
  }]);

＆＃13;

Haven未测试上述代码......

此外，重新考虑使用replace: true，因为自Angular 1.3以来已将其弃用

使用ng-transclude的指令在ng-transclude元素中包装html

1 个答案: