Communication between Directives can be done the following ways:-
1.Using require and directive controllers to communicate and share functionality
2.EVENTING -more defined way of communication.
3.using scope object- but this is not the appropriate way to do it since it has some limitations and certain communication troubles.
In this part we’ll go through the 1st point that is using require and directive controllers.
1.Require and Link properties are used when using directive controllers for communication.Directive controllers comes into the picture when directives share a hierarchical relationship. API is passed on a controller and the other directive uses its link function to consume it. Best practice is to use controller to expose an API to other. To access the controller functionality of one directive,either you need to declare the requiring directive on the same element or be a child of the directive instantiating the controller.
For example:-
This is the basic example to let you know the flow.
var exampleapp = angular.module(exampleapp", []);
exampleapp.directive(firstDirective, function() {
//Creating One Directive and defining a controller
return {
controller: function() {
this.print = function(message) {
console.log(message);
};
}
};
});
// second directive
app.directive(secondDirective", function() {
return {
//require property that tells it requires the firstDirectives controller functionality
require: "firstDirective",
// link function allow to access to the firstDirectives functionality through injecting its controller instance ,i.e, firstDirectiveController
link: function($scope, $elem, $attrs, firstDirectiveController) {
firstDirectiveController.print(This is an example.);
}
};
});
In HTML :-
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<meta charset="utf-8">
<title>Directives Communication</title>
</head>
<body ng-app="exampleapp">
// declare the requiring directive(secondDirective) on the same element
<div first-directive second-directive></div>
</body>
</html>
Accessing a directive on a parent element.
The same above example can be modified if you need to Access a directive on a parent element.
For this you would need ^ character to refer the parent(required) controller.^character will look for the required directive among parent elements.
Example:-
var exampleapp = angular.module(exampleapp", []);
exampleapp.directive(firstDirective, function() {
//Creating One Directive and defining a controller
return {
controller: function() {
this.print = function(message) {
console.log(message);
};
}
};
});
// second directive
app.directive(secondDirective", function() {
return {
//require property that tells it requires the parent firstDirectives controller functionality
require: ^firstDirective",
// link function allow to access to the parent Directives functionality through injecting its controller instance ,i.e, firstDirectiveController
link: function($scope, $elem, $attrs, firstDirectiveController) {
firstDirectiveController.print(This is an example.);
}
};
});
In HTML :-
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<meta charset="utf-8">
<title>Directives Communication</title>
</head>
<body ng-app="exampleapp">
<div first-directive >
<div second-directive ></div> // declare the child directive(secondDirective)
</body>
</html>
I will explain the remaining topics in my next part Communication between Directives in Angular JS- Part2" and it includes
1. EVENTING - more defined way of communication.
2. Using scope object
0 Comment(s)