How to communicate between directives in AngularJS

require property

Miroslav Šlapka
Dec 6, 2020 · 3 min read

Note: I wrote this article in 2016 and it serves for archival purposes. There’s a new version of Angular and AngularJS is now in Long Term Support mode.

Image for post
Image for post
Photo by Markus Winkler on Unsplash

I have stumbled across a problem at work recently when I needed directives to get some information from outside (parent element or controller). Imagine several buttons that represent directives. When I click a button it should increment its value by 1. This is fairly simple but I needed the buttons to be dependent on each other so they increment values continuously just by 1 and prevent further clicking. The following image illustrates what I mean:

Image for post
Image for post
incrementing values in buttons in any order

I didn’t know how to tackle this problem but my colleague came to my rescue. He introduced me to a ‘require’ property of the directive and told me I have to create a parent directive with a controller which we will use in our link function later on.

Here’s a code for the button directive (let’s call it priorityNumDirective):

I assume you are quite familiar with directives and know the other properties, but I am gonna quickly summarize what we are doing.

  • restrict: ‘E’ : we are gonna use elements
  • scope: true : it creates a new scope for the directive (also inherit parent scope)
  • template : defined button element with a function for incrementing values
  • require: [‘^prioritynumContainer’,’ngModel’]
    We require 2 controllers here. The first one is a controller of a parent directive which we are going to create in a minute. The second one is ngModel controller that provides methods we are gonna use.
    A ^ prefix make the directive look for the controller on its own element or its parents; without any prefix, the directive would look on its own element only.

Let’s create the parent directive called priorityNumContainerDirective and its controller:

Image for post
Image for post
When we click a button we call a method from parent controller which returns a ‘max’ number

So we created a parent directive and its controller. We return a function getMaxPriority which we can use in the link function of the button directive (priorityNumDirective). We require 2 controllers as I described above, but we also have to use the 4th parameter in the link function in order to use them. Check out the following example:

This link function above isn’t complete, but it should be clear by now how to require controllers from parent directive and thus communicate with children directives. Hope it helps and you learnt something new as I did :-)

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store