using element.AddClass to add an angular js directive, which is restricted to act as a 'class'

Question

I made a directive in angular js restricted it to act as a class and this directive makes my element drag-able.

On mousehover i want to do addClass and add this directive which is supposedly a class, but this doesnt give the desired result, am i missing something? below is what I am doing

module.directive('myDraggable', function ($document) {

   var directiveObject= {

   restrict:'AC',

//logic of dragging
}
return directiveObject;
});

i try to do

 element.addClass('myDraggable'); // but this fails! pls help

Solution 1

I guess, Angular is not observing elements, if they get a new directive attached at runtime. To make it work, you should recompile the element after adding the class with $compile.

Something like

element.addClass('myDraggable');
$compile(element)(scope);

regards

Solution 2

You can use the angular.element function. It's basically the same as a jquery element $(element)

Just do:

angular.element(element).addClass('myDraggable');

Comments

[Mouagip]

Is the class not added or is it added but the directive doesn't work?

[Rishul Matta]

directive works fine all i want to do is make a few div s drag-able depending on the return value of a web service thats why i want to add this directive to div on runtime.

[Mouagip]

Understood. But what I meant was: Does addClass not work or does the directive not work although the class is added correctly?

[Bargitta]

I tried to add $compile, but nothing happened there and even the element does not show up in the html. Do i need to add more?

[user2171669]

I got 'RangeError: Maximum call stack size exceeded'