圍繞主要元素的兒童包裹元素。 JQLite

Question

我正在使用angular和JQLite。我有一個帶有屬性指令的元素<md-button my-attr>MyText<md-icon>close</md-icon>。

在我的attr指令中，我想包裹<div layout=row flex></div>圍繞<md-button>的孩子。

我用wrap(), children().wrap()，我試着用包裝內容（）替換內容（）。我一直存在的問題是：

<md-button my-attr><div layout=row flex>MyText</div><div layout=row flex><md-icon>close</md-icon></div></md-button> 

我需要1 div包裹他們兩個。

<md-button><div layout=row flex>MyText<md-icon>close</md-icon></div></md-button> 

// $元素 //我試過幾件事情，這是我想的最後一件事。

 var content = $element.children().wrap('<div layout=row flex></div>'); 
     $element.empty(); 
     $element.append(content); 

澄清。

<md-button>是$元素。我想將$元素的子元素包裝在一個div中。所以<md-button><child/><child/><child/></md-button>成爲<md-button><div><child/><child/><child/></div></md-button>

Answer 1

 var content = "<div layout=row flex>" + $element.html() + "</div>"; 
     $element.empty(); 
     $element.append(content); 

之所以能夠得到它： #1

Answer 2

directive('myDirective',[function(){ 
    return{ 
    restrict:'A', 
    scope:{}, 
    link:function(scope,element,attr){ 
     element.wrap('<div class=".outer"></div>'); 
    } 
    }; 
}]); 

這將包裹你的元素與具有類.outer一個div。使用這樣的 <div my-directive>Element</div>

Answer 3

如果你有

<md-button> 
    <child/> 
    <child/> 
    <child/> 
</md-button> 

，你想獲得

<md-button> 
    <div> 
    <child/> 
    <child/> 
    <child/> 
    </div> 
</md-button> 

那麼試試這個

element.html(angular.element('<div></div>').html(element.contents()));