javascript - 我如何使用 angularJS 将可拖动指令应用于 Bootstrap 模式？

Question

我在我的 Angular 应用程序中使用 Bootstrap 模式，它工作正常。我需要让它可以拖动和调整大小，所以我定义了一个指令。现在的问题是它被应用于模态窗口内的内容，因此模态窗口变得透明。

打开窗口时如何将可拖动指令分配给模态窗口？这是代码，

HTML:

<div ng-controller="CustomWidgetCtrl">
    <div class="box-header-btns pull-right" style="top:10px" >
        <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
</div>
</div>

App.js:

var routerApp = angular.module('DiginRt',  ['ui.bootstrap','ngRoute']);
routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
  function($scope, $modal) {

    $scope.openSettings = function(widget) {
          $modal.open({
            scope: $scope,
            templateUrl: 'chart_settings.html',
            controller: 'chartSettingsCtrl',        
            resolve: {
              widget: function() {
                return widget;
              }
            }
          });
        };
    }
    ])

图表设置是另一个 HTML 页面。这是我的 Draggable 指令。

更新:

我已将问题更新为 Plunker

问题:

Answer 1

我找不到将指令添加到由 ui-bootstrap 打开的模态中的方法，因为它用模态对话框包裹了模板。

所以我所做的是使用以下代码将事件设置为拖动到模态对话框本身(而不是指令)。

我知道将事件添加到指令内的另一个元素不是最佳做法，但在这种情况下也不是坏做法，在这种情况下您不能直接将指令设置到元素。

这样做的原因是因为 ui-bootstrap不提供在 modal.open 函数上向 modal-dialog 添加指令的方法

这是放在指令开头的代码:

element= angular.element(document.getElementsByClassName("modal-dialog"));

和 plunkr