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

发布时间：2020-12-17 09:08:05 所属栏目：安全来源：网络整理

导读：在本文档中： 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 eleme

在本文档中： 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标签确实被替换。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!