使用自定義指令的div換行html元素

我有一個<input />標記，我想用一些特定的Div標記換行。我正在制定自定義指令，在其中我要實現此功能。但是我面臨的問題是，element的prepend()方法增加了整個標籤，即它在目標input標籤之前開始和結束。同樣，在elementappend()方法追加input標籤內的Div，而我真正想要的是，使用自定義指令的div換行html元素

在HTML：

<input id="oldinput" custom-textbox /> <!-- custom-textbox is my directive -->

應用指令，中源之後，我想這樣：

<div id="mynewdiv> <!-- added from directive --> 
    <input id="oldinput" custom-textbox /> <!-- present input tag where I'd apply my directive --> 
    <div id="othernewdiv" /> <!-- new div to be added from directive --> 
</div> <!-- end of newly added div from directive -->

但使用後的結果append()個prepend()功能：

<div id="mynewdiv> </div> <!-- added from directive, div ends here only --> 
<input id="oldinput" custom-textbox > <!-- present input tag where I'd apply my directive, doesn't end here --> 
    <div id="othernewdiv" /> <!-- new div to be added from directive, it's added inside input tag --> 
    </div> <!-- end of newly added div from directive --> 
</input> <!-- Wraps my newly added div -->

完全陌生的行爲。有人可以幫我弄這個嗎？

來源

2014-04-11 Mital Pritmani

wrap()不正是你想要什麼：

// wrap the input with a div 
element.wrap('<div id="mynewdiv></div> ') 
// add the second div 
element.parent().append('<div id="othernewdiv" />')

來源

2014-04-11 12:42:17 Robin

謝謝，這個伎倆。但是現在這個新添加的元素沒有被編譯。我在這裏發佈了這個問題 - http://stackoverflow.com/questions/23051494/newly-added-elements-from-angular-directive-not-getting-compiled。爲什麼它沒有被編譯？我應該如何讓它工作，以便'div'顯示那裏的角度變化？ –

你應該ngTransclude，也是Developper Guide看一看。

創建一個包裝其他元素

我們已經看到了，你可以在模型傳遞到使用隔離範圍的指令，但有時它是希望能夠在通過一項指令整個模板而不是字符串或對象。假設我們想要創建一個「對話框」組件。該對話框應該能夠包裝任何任意內容。

來源

2014-04-11 12:51:55 Frank6

它是否像'transclude'只能用於模板？對於我的要求，我必須使用與指令一起傳遞的屬性，因此，我寫了'link'函數來獲取屬性。用ngTranclude獲取屬性並給出使用這些屬性的模板有什麼方法嗎？ –

使用自定義指令的div換行html元素

回答

相關問題