Question

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

关于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。

创建包含其他元素的指令

我们已经看到您可以使用。将模型传递给指令   隔离范围，但有时候能够通过一个   整个模板而不是字符串或对象。我们来说吧   想要创建一个＆＃34;对话框＆＃34;零件。对话框应该可以   包装任意内容。

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

2 个答案: