Angularjs 基于scope属性，有条件地用另一个指令包装一个指令

我想知道是否有可能有以下内容

<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时，我希望

指令包装模板上的所有内容，而不仅仅是

如果

<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更干净。
如果

<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更干净。
您可以通过提供编译函数来实现这一点，如下所示：

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() {}
    }
  }
})

app.directive（'myDirective'，function（）{
返回{
限制：'E'，
编译：函数（远程通讯、tAttrs）{
var parent=tElement.parent（）；
if（tAttrs.wrap&！/^conditional wrapper$/i.test（父[0].nodeName））{
var html=tElement.parent（）.html（）；
var wrapper=angular.element（“”）；
parent.empty（）.append（包装器）；
html（html）；
}
返回函数link（）{}
}
}
})

请查看POC，并告诉我您是否需要它。
您可以通过提供编译函数来实现这一点，如下所示：

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() {}
    }
  }
})

app.directive（'myDirective'，function（）{
返回{
限制：'E'，
编译：函数（远程通讯、tAttrs）{
var parent=tElement.parent（）；
if（tAttrs.wrap&！/^conditional wrapper$/i.test（父[0].nodeName））{
var html=tElement.parent（）.html（）；
var wrapper=angular.element（“”）；
parent.empty（）.append（包装器）；
html（html）；
}
返回函数link（）{}
}
}
})

查看POC，让我知道您是否在寻求帮助。
我试图将我的问题过于简单化，因此我忘了提及一些关键问题。将有兄弟元素，如果wrap属性设置为true，则需要将这些元素转移到指令中。。。这比ng if有点棘手，但谢谢你@无知的人我不清楚你在说什么。你能用全部细节和例子更新你的问题吗？我编辑了原始描述。希望它现在更有意义？@IgnorantUser
ng如果
仍然可以正常工作。只需在两个条件中添加相同的代码。您可能只想在另一个指令中包装
标题lorem ipsum text
。这些HTLM元素不会是相同的。这就是为什么我不能将它们放在指令模板中。它可能是一个h5，一个div，或者一个span，或者你所说的。我试图把我的问题简单化，所以我忘了提到一些重要的东西。将有兄弟元素，如果wrap属性设置为true，则需要将这些元素转移到指令中。。。这比ng if有点棘手，但谢谢你@无知的人我不清楚你在说什么。你能用全部细节和例子更新你的问题吗？我编辑了原始描述。希望它现在更有意义？@IgnorantUser
ng如果
仍然可以正常工作。只需在两个条件中添加相同的代码。您可能只想在另一个指令中包装
标题lorem ipsum text
。这些HTLM元素不会是相同的。这就是为什么我不能将它们放在指令模板中。它可以是h5、div、span或您命名的。如果您只想包装指令，并且它是下面的兄弟，那么您需要稍微修改一下脚本，但仍然很容易完成。我希望包装模板上的所有html元素（或者这个plunkr中的主体）（其他列表项spans、h5、p等都应位于蓝色边框内）然后修改函数，使其不引用
tElement.parent（）
，而是
document.body
或so:-）无法访问document.body的jqlite方法。我将要评论您需要包装它：-）如果您只想包装指令及其以下兄弟，您需要稍微修改脚本，但这仍然很容易。我希望包装模板（或本文件中的正文）上的所有html元素（另一个列表项spans、h5、p等都应该在蓝色边框内）然后修改该函数，使其不引用
tElement.parent（）
，但
document.body
或so:-）无法访问document.body的jqlite方法。body即将注释需要包装它：-）