如何绑定数据到 data-content？

Question

我正在尝试使用来自http://getbootstrap.com/javascript/#popovers-examples的代码。

<button type="button" class="btn btn-lg btn-danger" 
data-toggle="popover" title="Popover title" 
data-content="And here's some amazing content. It's very engaging. Right?">
   Click to toggle popover
</button>

但是我无法绑定到属性"data-content"，它会给出以下错误信息。

不能绑定到 'content'，因为它不是 'span' 的已知属性

这是我的Angular代码

<span data-toggle="popover" class="fa fa-exclamation-circle fa-lg" [data-content]="getTooltipMsg('lastName')"></span>

如何解决这个问题？

- Flying Gambit

---

你所发布的代码中没有 data-content 的绑定。这真的是你正在使用的代码吗？ - Günter Zöchbauer

@GünterZöchbauer 我更新了我的问题。 - Flying Gambit

Answer 1

Angular默认使用属性绑定，但是在元素上没有属性，并且似乎也没有任何带有输入的Angular组件或指令。

因此您需要使用属性绑定：

<span data-toggle="popover" class="fa fa-exclamation-circle fa-lg" [attr.data-content]="getTooltipMsg('lastName')"></span>

- Günter Zöchbauer

Answer 2

我建议使用一个专门提供Angular+Bootstrap集成的库，这样打开弹出框就变得非常简单，只需要像下面这样即可：

<span [ngbPopover]="getTooltipMsg('lastName')" popoverTitle="Some title" class="fa fa-exclamation-circle fa-lg" ></span>

这里是一个使用 ng-bootstrap 库的实时示例：http://plnkr.co/edit/gTSxuZjx2ovkBAX0GWYQ?p=preview 专门的库，例如ng-bootstrap，不仅提供了在Angular生态系统中自然的API，而且还允许您放弃对jQuery的依赖。

- pkozlowski.opensource