我是伊只雄熊

导航

AngularJS 指令中的 replace:true

  默认值是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 会报错,所以,指令模板必须要有一个根元素包裹。

posted on 2018-03-14 09:38  我是伊只雄熊  阅读(300)  评论(0编辑  收藏  举报