AngularJS 指令中的 replace:true

转载于 2018-03-14 09:38:00 发布 · 482 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shawnhu/p/8565138.html

文章标签：

本文详细介绍了AngularJS中指令的replace属性的作用及其使用方法。当replace设为true时，指令模板将替换掉原始元素，但需确保模板内有单一的根元素。文章通过实例展示了replace属性对DOM结构的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　默认值是fasle,模板会被当作子元素插入到调用此指令的元素内部。

<my-directive></my-directive>

myModule.directive("myDirective",function(){
    return {
        template:"<h3>我是模版</h3>"
    }
})

　　结果：

<my-directive>
      <h3>我是模版</h3>
</my-directive>

　　若设置为replace:true

myModule.directive("myDirective",function(){
    return {
        template:"<h3>我是模版</h3>",
        replace:true
    }
})

　　结果：

<h3>我是模版</h3>

　　没有根元素 <my-directive></my-directive>，直接覆盖。

　　注意的是：

　　在这种情况下模版要又根元素，如模版如下：

　　<h3>我是模版</h3><p>兄弟</p>
　没有包裹的根元素，h1 和 p是同级元素的情况下，使用 replace:true 会报错，所以，指令模板必须要有一个根元素包裹。

转载于:https://www.cnblogs.com/shawnhu/p/8565138.html