Directives personnalisées avec jQueryUI
Bonjour, j'ai créé 2 directives personnalisées dans Angular, une pour cloner un object (.clone avec jQuery) et la seconde pour déplacer cet objet sur ma page (.draggable avec jQuery UI) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
app.directive('cloneMe', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.click(function() {
$(this).clone().appendTo("#imageclonee");
});
}
};
});
app.directive('dragMe', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.draggable();
}
};
}); |
Et voici mon code HTML :
Code:
1
2
3
|
<div clone-me> <img src="images/1.jpg"/> </div>
<div id="imageclonee" drag-me> </div> |
Ce que j'aimerais faire c'est de cloner une image et qu'ensuite l'image clonée puisse être déplacée grâce à l'itération .draggable, mais malheureusement rien ne s'affiche. J'ai fais plusieurs test :
- Le premier sans utiliser Angular et clone + draggable marchent correctement ensemble, donc le problème vient de Angular et non de jQuery.
- Le deuxième, avec Angular cette fois en utilisant séparément les directives personnalisées, c'est-à-dire que la directive personnalisée "cloneMe" marche correctement toute seule et la directive personnalisée "dragMe" idem.
Donc c'est le fait de mixer les deux directives qui fait bugger Angular. Quelqu'un aurait-il une idée ?
Merci d'avance !
