AngularStrap -- Popovers

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'});