angularjs-directive - 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;

但是draggable指令没有“听到”mousedown事件。模态是否吞咽了 mousedown 事件？

Answer 1

我无意中发现了这个 plunker 示例(不是试图获得学分 - 不是我写的):

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

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