условно завернуть директиву с другой, на основе атрибута области видимости

Question

Я хотел бы знать, если это возможно, чтобы иметь следующий

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

генерировать что-то вроде этого, когда обертка установлена ​​истина:

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

Edit: Обратите внимание, что если атрибут обертки установлен верно, я хочу <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() {} 
    } 
    } 
}) 

чек РОС 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 очистителя.