使用自定义指令中的 Div 包装 html 元素

Question

我有一个<input /> 标签，我想用一些特定的Div 标签包装它。我正在制作要实现此功能的自定义指令。但我面临的问题是，element 的prepend() 方法添加了整个标签，即它在目标input 标签之前开始和结束。同样，element 上的append() 方法在input 标签内附加了Div，而我真正想要的是，

在 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 -->

完全奇怪的行为。有人可以帮我解决这个问题吗？

Answer 1

wrap() 完全符合您的要求：

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

Answer 2

您应该看看ngTransclude 和Developper Guide。

创建包装其他元素的指令

我们已经看到，您可以使用 隔离范围，但有时希望能够传入一个 整个模板而不是字符串或对象。假设我们 想要创建一个“对话框”组件。对话框应该可以 包装任意内容。