Discussion :

[R2D22]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[R2D22]

Problème résolu : les dernières versions d'Angular fonctionnent parfaitement bien avec jQuery UI, pas besoin de faire des directives personnalisées (scope global), des directives normales suffisent.