2016-09-30 92 views
2

我是新的角js和bootstrap。我有一个要求,我需要在悬停或点击时实现弹出窗口,并且用户应该能够编辑工具提示。你能提出一个实施它的方法吗?popover可编辑的工具提示

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data- content="Some content">Hover over me</a> 

我也对任何其他方法开放。

回答

0

检查angular-ui-bootstrap - 项目,特别是酥料饼的指令:

https://angular-ui.github.io/bootstrap/#/popover

您将需要添加的角度-UI-引导脚本的index.html,与常规的引导CSS一起 - 有一个CDN此:

https://cdnjs.com/libraries/angular-ui-bootstrap#

将上述2个脚本(min或unminified)和bootstrap.css文件index.html的后 - 你必须添加angul AR-UI-引导到您的应用程序初始化过程,如:

angular.module('myModule', ['ui.bootstrap']); 

此时,您已经准备好使用酥料饼 - 例如在mousenter:

<button uib-popover="This popover appeared on mouse enter!" 
      popover-trigger="'mouseenter'" 
      type="button" 
      class="btn btn-default">Hover Over</button> 

可以很明显的让这个充满活力的 - 每您的要求 - 就像文档中的示例:

<div class="form-group" ng-controller="MyController as vm"> 
     <label>Popup Text:</label> 
     <input type="text" 
      ng-model="vm.popoverContent" 
      class="form-control"/> 

     <button uib-popover="{{vm.popoverContent}}" 
      popover-trigger="'mouseenter'" 
      type="button" 
      class="btn btn-default">Dynamic Hover Over</button> 
    </div>