Angular 可拖动指令不适用于 AngularUI 模态对话框

Question

有一个 Angular 可拖动指令 here。

它可以应用于 AngularUI 模态弹出窗口吗？

我创建了一个名为ngdrag.js 的文件，我在其中放置了指令代码，并且该文件被加载到 HEAD 部分。

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script type="text/javascript" src="js/ngdrag.js"></script>
    <script type="text/javascript" src="js/Test1.js"></script>

我的模块包括它：

     var myApp = angular.module('myApp', ['ui.bootstrap','ngdrag']);

为我的弹出窗口提供内容的 html 片段执行以下操作：

   <script type="text/ng-template" id="myModalContent.html" 
        class='modal-window' draggable>

但是模态窗口不能拖动。

我可以看到该指令在页面加载时被正确调用：调试器在 ngdrag.js 中设置的断点处暂停。

 return function (scope, element, attr) {

           <breakpoint here>   var startX = 0, startY = 0, x = 0, y = 0;

但是可拖动指令没有“听到”mousedown 事件。模态是否会吞下 mousedown 事件？

Answer 1

我无意中发现了这个 plunker 示例（不是想为此获得学分 - 不是我写的）：

http://embed.plnkr.co/8CHoiN/preview

所以你可以看一下代码，看看它是如何实现的。