我是角度js和bootstrap的新手。我要求我需要在悬停或点击时实现弹出窗口,用户应该能够编辑工具提示。你能建议一种实现它的方法吗?
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data- content="Some content">Hover over me</a>
我也对任何其他方法持开放态度。
答案 0 :(得分:0)
检查angular-ui-bootstrap
- 项目,特别是popover指令:
https://angular-ui.github.io/bootstrap/#/popover
您需要将angular-ui-bootstrap脚本与常规引导程序css一起添加到index.html - 这里有一个CDN:
https://cdnjs.com/libraries/angular-ui-bootstrap#
将上述2个脚本(min或unminified)和bootstrap.css文件添加到index.html后,必须将angular-ui-bootstrap添加到应用程序引导过程中,如:
angular.module('myModule', ['ui.bootstrap']);
此时您已准备好使用popover - 例如在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>