AngularJS accédant aux éléments DOM à l’intérieur du modèle de directive

Existe-t-il un moyen plus “angular” de sélectionner les éléments DOM dans un modèle de directive? Par exemple, disons que vous avez cette directive:

app.directive("myDirective", function() { return { template: '
', link: function(scope, element, attrs) { var list = element.find("ul"); } } });

J’ai utilisé le sélecteur de style jQuery pour obtenir l’élément DOM

    rendu dans mon modèle. Y a-t-il une meilleure manière de faire cela?

    Vous pouvez écrire une directive pour cela, qui assigne simplement l’élément (jqLite) à la scope en utilisant un nom d’atsortingbut.

    Voici la directive:

     app.directive("ngScopeElement", function () { var directiveDefinitionObject = { ressortingct: "A", comstack: function comstack(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { scope[iAttrs.ngScopeElement] = iElement; } }; } }; return directiveDefinitionObject; }); 

    Usage:

     app.directive("myDirective", function() { return { template: '
    ', link: function(scope, element, attrs) { scope.list[0] // scope.list is the jqlite element, // scope.list[0] is the native dom element } } });

    Quelques remarques:

    • En raison de la compilation et de l’ordre des liens pour les directives nestedes, vous ne pouvez accéder à scope.list partir de la fonction myDirective myDirective, que vous utiliserez très probablement
    • ngScopeElement utilise une fonction preLink, de sorte que les directives nestedes dans l’élément ayant ng-scope-element peuvent déjà accéder à scope.list
    • pas sûr comment cela se comporte en termes de performance

    Je ne pense pas qu’il y ait plus de “manière angular” pour sélectionner un élément. Voir, par exemple, la manière dont ils atteignent cet objective dans le dernier exemple de cette ancienne page de documentation :

     { template: '
    ' + '
    {{title}}
    ' + '
    ' + '
    ', link: function(scope, element, attrs) { // Title element var title = angular.element(element.children()[0]), // ... } }

    Cette réponse arrive un peu tard, mais je ne faisais que répondre à un besoin similaire.

    En observant les commentaires écrits par @ganaraj dans la question, Un cas d’utilisation dont j’avais besoin était de passer un nom de classe via un atsortingbut directive à append à une balise li-ng-repeat dans le modèle.

    Par exemple, utilisez la directive comme ceci:

      

    Et obtenez le code HTML suivant:

     
    • Item 1
    • Item 2

    La solution trouvée ici appliquée avec templateUrl serait:

     app.directive("myDirective", function() { return { template: function(element, attrs){ return '
    '; }, link: function(scope, element, attrs) { var list = element.find("ul"); } } });

    Juste essayé avec succès avec AngularJS 1.4.9.

    J’espère que cela aide.