如何使用angularJS将可拖动指令应用于bootstrap模式？

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

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

HTML:

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

问题:

我找不到将指令添加到打开的模态的方法ui-bootstrap,因为它使用模态对话框包装模板.

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

我知道将事件添加到指令中的另一个元素不是最好的做法,但在这样的情况下也不是坏习惯,在这种情况下你不能直接向元素设置指令.

这样做的原因是因为ui-bootstrap没有提供一种向modal-dialogon modal.open函数添加指令的方法

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

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

和傻瓜