Question

我正在尝试在用户点击的位置打开模式对话框。模态对话框应该从一个timer事件打开，基本上mouseDown启动一个计时器，而mouseUp清除它，如果有足够的时间通过我想打开对话框。需要在单击位置打开对话框。我实现了所有，但我不知道如何设置对话框的位置，我正在使用角度引导模式对话框。

任何想法？

这是我的代码片段。

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

Answer 1

这可能为时已晚，但是如何使用带有自定义模板的angular-ui-bootstrap-popover：

注意：您需要从angular-ui-bootstrap下载自定义pull-request，因为当前版本0.12不支持popover模板，希望在{}中支持此模板{3}}

然后你可以这样做：

<button
  class="btn btn-default"
  popover-window-placement="top"
  popover-window-trigger="click"
  popover-window="templateb.html"
>
  Popover With Template
</button>

注意：该指令不再是popof窗口。

按照此0.13了解详情，issue显示了一个实例。

Answer 2

我认为，bootstrap的模态对于这个任务来说不是一个好主意，因为你无法告诉他在哪里打开位置。也许Popover更适合你的任务？

Answer 3

弹出窗口可满足您的要求。

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

我从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>

在您的控制器中：

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

});

Plunker

Plunker在这里：

如何在角度bootstrap ui中设置模态对话框的位置？

3 个答案: