如何控制 Angular-UI Bootstrap 弹出框的确切位置答案

【问题标题】：How to control exact position of Angular-UI Bootstrap popover如何控制 Angular-UI Bootstrap 弹出框的确切位置
【发布时间】：2015-07-01 22:26:41
【问题描述】：

我在我的应用程序中构建了一个非常基本的 Angular-UI 弹出框。但是，标准的popover-placement 选项并没有给我我需要的东西。我希望我的 popover-placement 成为 bottom，如下面的 HTML 注释。但是，此弹出框附加到的元素位于屏幕的左边缘，因此它的一半会离开屏幕。例如，有没有办法明确设置left: 0px，这样我仍然可以将此弹出框放在底部但避免让它从屏幕上消失？我的另一个选择是只使用popover-placement='right'，但这不太理想，因为它会覆盖其他内容。

<img ng-src="/images/{{player.status}}.png" alt="" id="status" popover='{{player.detail}}' popover-title='Player Status: {{player.detailedStatus}}' popover-trigger='mouseenter' popover-placement='bottom'>

【问题讨论】：

并非如此：github.com/angular-ui/bootstrap/issues/432。您也许可以调整定位服务。还有一些其他相关的弹出框放置问题可能值得扫描，看看其他人是否有好的解决方法。

标签： javascript html css angularjs angular-ui-bootstrap

【解决方案1】：

尝试使用不带“popover”前缀的属性。正如我在指令源中看到的那样，不需要前缀

.directive( 'popoverPopup', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: 'template/popover/popover.html'
  };
})

&lt;img ng-src="/images/{{player.status}}.png" alt="" id="status" popover='{{player.detail}}' title='Player Status: {{player.detailedStatus}}' popover-trigger='mouseenter' placement='bottom'&gt;

【讨论】：