sélecteur de requête dans imbriquées AngularJS directives

Question

J'utilise deux directives dans ce code HTML:

<div animations> 
    <h2>Title</h2> 
    <span class="animateBtn">Animate!</span> 

    <info-section></info-section> 
</div> 

Le premier est un attribut directive:

angular.module('app').directive('animations', ['$window', ($window: any) => { 
    return { 
     restrict: "A", 
     link: function ($scope: any, element: any, attrs: any) { 
     angular.element(document).ready(() => { 
      let animateBtns = angular.element(element[0].querySelector('.animateBtn')); 
      if (animateBtns && animateBtns.length) { 
       for (let i = 0, animateBtnsLength = animateBtns.length; i < animateBtnsLength; i++) { 
        let currentBtn = animateBtns[i]; 
        currentBtn.addEventListener("click", function() { 
         .... other code.... 
        }); 
       } 
      } 

       ..... other code ..... 

     }); 
     } 
    }; 
}]) 

Ainsi, il fait tout simplement un querySelector à sélectionnez tous les boutons qui, au clic, doivent commencer une certaine fonction. Et ça marche. Le problème est que la deuxième directive contient également un « animateBtn »:

.directive('infoSection', function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     template: '<div><span class="animateBtn">Animate with this too</span></div>' 
    } 
}); 

Le problème est que dans la première directive (même si je l'utilisateur (document) .ready()), le rendement du sélecteur juste un élément (le span sous le titre), et il n'inclut pas le "animateBtn" de la deuxième directive.

Ici vous trouverez le code complet: PLNKR

Answer 1

Avec AngularJS on utilise des directives pour fixer le code à des éléments au lieu des sélecteurs de requête:

app.directive("animateBtn", function($window) { 
    return { 
     restrict: 'C', 
     link: postLink 
    }; 
    function postLink (scope, elem, attrs) { 
     elem.on('click', function() { 

      .... other code.... 

     }); 

      .... other code.... 

    } 
}) 

La directive ci-dessus Attachera le gestionnaire de clic et le code associé à chaque élément avec la classe animateBtn lorsque l'élément est ajouté au DOM par le framework AngularJS.

---

si une écriture d'une fonction à l'intérieur "animations" directive, comment puis-je déclencher l'intérieur "animatBtn" directive? Je veux dire, dans votre code, à l'intérieur de la première ligne de "..... autre code ...." comment puis-je appeler une fonction écrite dans la directive "animations"?

Utilisez la propriété require du DDO pour accéder au contrôleur de la directive animations:

app.directive("animateBtn", function($window) { 
    return { 
     restrict: 'C', 
     link: postLink, 
     require: '^animations' 
    }; 
    function postLink (scope, elem, attrs, animations) { 
     elem.on('click', function() { 

      .... other code.... 

     }); 

     //call animations API 

     animations.someMethod(args); 

    } 
}) 

Dans la directive animations:

app.directive("animations", function() { 
    return { 
     controller: ctrl 
    } 
    function ctrl($element, $scope) { 
     this.someMethod = function(args) { 
      //code here 
     }; 
    } 
}) 

Pour plus d'informations, consultez AngularJS Comprehensive Directive API Reference - require