Question

我想知道是否可以使用以下内容

<my-directive wrap=true></my-directive>
<h5>A header </h5>
<p>lorem ipsum text</p>

当wrap设置为true时，

生成类似的东西：

<conditional-wrapper>
    <my-directive></my-directive>
    <h5>A header </h5>
    <p>lorem ipsum text</p>
<conditional-wrapper>

编辑：请注意，当wrap属性设置为true时，我希望<conditional-wrapper>指令包装模板上的所有内容，而不仅仅是<my-directive>

Answer 1

你可以通过提供编译功能来实现这一点，如下所示：

app.directive( 'myDirective', function () {
  return {
    restrict : 'E',

    compile : function ( tElement, tAttrs ) {
      var parent = tElement.parent();

      if ( tAttrs.wrap && !/^conditional-wrapper$/i.test( parent[0].nodeName ) ) {
        var html = tElement.parent().html();

        var wrapper = angular.element( '<conditional-wrapper>' );
        parent.empty().append( wrapper );
        wrapper.html( html );
      }

      return function link() {}
    }
  }
})

查看POC here并告诉我您是否接受了这项工作。

Answer 2

使用ng-if

<div ng-if="wrap">
  <conditional-wrapper>
    <my-directive></my-directive>
    <h5>A header </h5>
    <p>lorem ipsum text</p>
  <conditional-wrapper>
</div>
<div ng-if="!wrap">
  <my-directive></my-directive>
  <h5>A header </h5>
  <p>lorem ipsum text</p>
</div>

您可能想要换行

<my-directive></my-directive>
<h5>A header </h5>
<p>lorem ipsum text</p>

在指令中使你的html更清洁。

根据范围属性有条件地将指令与另一个指令包装在一起

2 个答案: