Directive Communication

Share this video with your friends

Send Tweet

In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

James
James
~ 9 years ago

At around 1 min 25 sec specific syntax is used to require another directives controller. The "^" symbol is pre-pended to the directive name where the controller lives. This video seems to place emphasis on hierarchy on directives. If it is the case that "^" is used to denote some ancestor it would be nice if that was made explicit. Furthermore is there a different character for accessing the controller of a descendant directive at arbitrary depth ?

Joel Hooks
Joel Hooks
~ 9 years ago

At around 1 min 25 sec specific syntax is used to require another directives controller. The "^" symbol is pre-pended to the directive name where the controller lives. This video seems to place emphasis on hierarchy on directives. If it is the case that "^" is used to denote some ancestor it would be nice if that was made explicit. Furthermore is there a different character for accessing the controller of a descendant directive at arbitrary depth ?

The require: '^ctrlName' syntax in the directive definition object is used to signal a parent controller is required. The parent controller is then made available as in the link function as the fourth argument. This is useful for creating complex components that need to communicate state between siblings.

There are other accessors that you can learn about. They were out of scope for this basic lesson.