Sajeetharan Sajeetharan - 1 year ago 122
AngularJS Question

How can i apply a draggable directive to bootstrap modal using angularJS?

I am using bootstrap modal in my Angular Application, it works fine. I need to make it draggable and resizeable, so i have defined a directive. The issue now is it getting applied to the content inside the modal window, hence the modal window becomes transparent.

how can i assign the draggable directive to the modal window when opening the window?
Here is the code,


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


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

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

Chart Settings is another HTML page. Here is my Draggable directive.


I have update the issue with

enter image description here

Answer Source

I couldn't find a way to add the directive to the modal opened by ui-bootstrap, as it wraps the template with a modal-dialog..

So what i did is setting the events for drag to the modal-dialog itself(not the directive) using the following code.

I know it is not the best practice to add events to another element inside a directive but not a bad practice as well in cases like these, where you cant set a directive directly to the element.

the reason doing this is because ui-bootstrap doesnt provide a way to add a directive to the modal-dialog on function

here is the code to be put at the start of the directive:

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

and the plunkr

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download