angularjs – 如何使用`replace`的指令定义?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何使用`replace`的指令定义?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在本文档中: http://docs.angularjs.org/guide/directive,它表示有一个替换配置的指令:

template – replace the current element with the contents of the HTML. The replacement process migrates all of the attributes / classes from the old element to the new one. See the Creating Components section below for more information.

JavaScript代码

app.directive('myd1',function(){
  return {
    template: '<span>directive template1</span>',replace: true
  }
});

app.directive('myd2',function(){
  return {
    template: '<span>directive template2</span>',replace: false
  }
});

HTML代码

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

但最终页面看起来像:

directive template1
directive template2

看来替换不工作。我想念什么?

现场演示:http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

你正在与transclude:true混淆,这将附加内部内容

replace:true表示指令模板的内容将替换该指令声明的元素,在本例中为< div myd1>标签

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

例如without replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

和replace:true

<span class="replaced" myd1="">directive template1</span>

正如你在后面的例子中看到的,div标签确实被替换。

猜你在找的Angularjs相关文章