AngularStrap中的Popovers，提供了一個popover的類似tooltip的小窗體，內部的內容可以簡單，也可以提供復雜和交互操作。

先看官網提供的樣例：

這個是比較復雜的，有模板html提供了復雜的交互功能。

下面看看具體的使用。

• Plugin dependency
  Popovers require the tooltip module to be loaded.

下面提供的4個例子操作。

<!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} --> <button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover<br><small>(using an object)</small> </button><!-- You can also use data-attrs to assign scope variables --> <button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover<br><small>(using data-attrs)</small> </button><!-- You can use a custom html template with the `data-template` attr --> <button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover<br><small>(using data-template)</small> </button><!-- A popover can also be triggered programmatically using the $popover service --> <button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover<br><small>(using $popover service)</small> </button>

• Usage
  Append a bs-popover attribute to any element to enable the directive.

The module exposes a $popover service
Available for programmatic use (mainly in directives as it requires a DOM element).

var myPopover = $popover(element, {title: 'My Title', content: 'My Content', trigger: 'manual'});

總結

以上是生活随笔為你收集整理的AngularStrap -- Popovers的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。