Comment ajouter une directive avec JQuery

Version imprimable

Bonjour,

J'ai fait une directive:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
angular.module('TEST').directive('helloWorld', function() {
        return {
            scope:{
                name : '=',         
                nameStatic : '@', 
                select : '&'        
            },
            restrict: 'AEC',
            replace: 'true',
            template: '<p ng-click="select()">Hello World!! {{name}} {{nameStatic}}</p>',
            link: function(scope, element, attributs){
                console.log(attributs.nameStatic);
            }
        };
    });

J'aimerai avec Jquery l'ajouter à ma page

Code:

1
2
 
$("body").append("<hello-world name-static='Parametre statique' select='testDirective()' id='screenshot'/>");

Je sais que l'on devrait éviter d'utiliser les 2 techno mais je suis en train de migrer petit à petit.

Comment puis je faire à votre avis ? Le code marche un element HTML classic

Merci pour vos conseils

10/10/2014, 18h19
kaari kosaku

Salut, ta méthode ne va pas fonctionner de cette manière.

Les directives que tu crée avec angular ne seront remplacées que si elle se trouvent dans ton template, en fait, il faut qu'elles soient présentes sur ta page avant qu'angular ne passe en phase de $compile.
Pour tester, essaie d’exécuter $('body').append() avant ton appel 'angular.js' ou 'angularmin.js', et ça devrait fonctionner.

Ce problème se produit lorsqu'on essaie d'ajouter dynamiquement des directives crées avec angular, va voir ici.
Si tu tape '<b>machin<b>' dans l'input, le résultat affiché sera bien 'machin', mais si tu tape '<test></test>', le résultat sera vide.

Ne pourrais-tu pas provoquer cet ajout d’élément depuis angular plutôt que depuis jQuery ?
14/10/2014, 17h56
Marco46

Topolino ta question fait vraiment partie des ultra-basiques.

Prends la peine de faire les exercices proposés sur le site officiel et tu auras tes réponses.