CODEWITHSUNDEEP
angularjs-directivemodal-dialogdraggableangular-ui-bootstrap
Tim
Tim

Reputation: 8919

Angular draggable directive not working with AngularUI modal dialog

There is an Angular draggable directive here.

Can it be applied to an AngularUI modal popup window?

I've created a file called ngdrag.js in which I placed the directive code, and that file is loaded in the HEAD section. 

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

My module includes it:

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

and the html fragment that provides the content for my popup window does this:

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

but the modal window cannot be dragged.

I can see that the directive is being invoked properly when the page is loaded: the debugger pauses at a breakpoint set in ngdrag.js. 

 return function (scope, element, attr) {

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

But the mousedown event is not being "heard" by the draggable directive. Does the modal swallow the mousedown event?

Upvotes: 2

Views: 4908

Answers (1)

Nilvap
Nilvap

Reputation: 21

I accidentally found this plunker example (not trying to take credits for it - not written by me):

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

So you can look at the code an see how it is implemented.

Upvotes: 2

Related Questions