twitter-bootstrap 如何在 angular bootstrap ui 中设置模态对话框的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20962952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can I set the position of modal dialog in angular bootstrap ui?
提问by nir melamoud
I'm trying to open a modal dialog at a location where the user clicked. the modal dialog should open from a timer event, basically mouseDown start a timer, and mouseUp clear it, if enough time passed I want to open the dialog. The dialog need to be opened at the location of the click. I implement it all, but I do not know how to set the location of the dialog, I'm using angular bootstrap modal dialog.
我正在尝试在用户单击的位置打开一个模态对话框。模态对话框应该从计时器事件中打开，基本上 mouseDown 启动计时器，并且 mouseUp 清除它，如果时间足够我想打开对话框。对话框需要在单击的位置打开。我实现了这一切，但我不知道如何设置对话框的位置，我使用的是 angular bootstrap 模态对话框。
any idea ?
任何的想法 ？
here is a snippet of my code.
这是我的代码片段。
var timer = null;
var lastSceneSelectedLocation = { } ;
// handle / prepare for context menu event
$scope.mouseDown = function(event) {
lastSceneSelectedLocation.x = event.clientX;
lastSceneSelectedLocation.y = event.clientY;
timer = window.setTimeout($scope.openSceneMenu, 1000);
// tap and hold for 1 second to open menu
};
// cleanup context menu event
$scope.mouseUp = function() {
window.clearTimeout(timer);
};
$scope.ScenesContextOptions = ["Move Back", "Move Forward", "Duplicate", "Delete"];
$scope.SceneActionSelected = {};
// context menu event
$scope.openSceneMenu = function() {
console.log("in scene context menu");
var modalInstance = $modal.open({
templateUrl: 'views/SceneModalDialog.html',
scope: $scope,
windowClass: 'sceneContextMenu'
});
modalInstance.opened.then(function () {
console.log('modal opened');
});
modalInstance.result.then(function () {
console.log($scope.SceneActionSelected);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
回答by Yahya KACEM
this maybe too late but here's how to use a angular-ui-bootstrap-popover with a custom template:
这可能为时已晚，但这里是如何将 angular-ui-bootstrap-popover 与自定义模板一起使用：
Note: you need do download a custom pull-requestfrom angular-ui-bootstrap since the current version 0.12 doesn't support templates for popover hopefully this will be supported in 0.13.
注意：您需要从 angular-ui-bootstrap下载自定义拉取请求，因为当前版本 0.12 不支持 popover 模板，希望0.13可以支持。
then you can do something like this:
那么你可以做这样的事情：
<button
class="btn btn-default"
popover-window-placement="top"
popover-window-trigger="click"
popover-window="templateb.html"
>
Popover With Template
</button>
notice:the directive is not popover anymore it's popover-window.
注意：该指令不再是 popover，而是 popover-window。
follow this issuefor more information this plnkrshows a live example.
回答by MichaelBarce
A popover may satisfy your requirement.
弹出框可以满足您的要求。
https://angular-ui.github.io/bootstrap/#/popover
https://angular-ui.github.io/bootstrap/#/popover
I modified the example Plunker from the Angular UI Bootstrap documentation to show how you could include a list of items to select from and then identify the selected item in your controller.
我修改了 Angular UI Bootstrap 文档中的示例 Plunker，以展示如何包含要从中选择的项目列表，然后在控制器中识别所选项目。
<div ng-controller="PopoverDemoCtrl">
<br/><br/><br/><br/><br/><br/>
<h4>Popover With Template</h4>
<button popover-template="dynamicPopover.templateUrl"
popover-title="{{dynamicPopover.title}}"
type="button"
class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<ul>
<li ng-click="clickEvent(1)">Item 1</li>
<li ng-click="clickEvent(2)">Item 2</li>
<li ng-click="clickEvent(3)">Item 3</li>
</ul>
</script>
</div>
In your controller:
在您的控制器中：
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html',
title: 'Popover With Template'
};
$scope.clickEvent = function (item) {
console.log("clickEvent: " + item);
alert("You Clicked Item: " + item);
};
});
The Plunker is here:
普朗克在这里：
