Query selector in nested AngularJS Directives

Question

I'm using two directives in this HTML code:

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

The first, is an Attribute 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 ..... }); } }; }]) 

So, it simply does a querySelector to select all buttons that, at the click, have to start a certain function. And it works. The problem is that the second directive also contains an "animateBtn":

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

The problem is that in the first directive (even if I user (document).ready()), the selector returns just one element (the span under the title), and it doesn't include the "animateBtn" of the second directive.

Here you can find the full code: PLNKR

Answer 1

With AngularJS one uses directives to attach code to elements instead of query selectors:

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

The above directive will attach the click handler and associated code to each element with the class animateBtn when the element is added to the DOM by the AngularJS framework.

---

if a write a function inside "animations" directive, how can I trigger it inside "animatBtn" directive? I mean, in your code, inside the first line of "..... other code...." how can I call a function written in the "animations" directive?

Use the require property of the DDO to access the controller of the animations directive:

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); } }) 

In the animations directive:

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

For more information, see AngularJS Comprehensive Directive API Reference - require