Hello again,
In Previous Part 1 of Communication between Directives in AngularJS with Example we learned about Communication between Directives using require and directive controllers, and now in this part, we’ll be going through the other two points:-
2. Events are used when we need to communicate between parent-child or sibling directives. Eventing is directional. $broadcast and $emit are the two event functions that are used for the communication. Eventing as the name suggests, will lift some sort of event from one directive and handle that event in another directive.
$emit- it sends the event name in the upward direction,i.e.$emit goes up the scope hierarchy.
$broadcast- it sends the event name in the downward direction,i.e.$broadcast goes down the scope hierarchy.
Accessing a directive on a parent element:-
For example:-
var exampleapp = angular.module(exampleapp", []);
exampleapp.directive(firstDirective, function() {
return {
compile: function() {
return {
//pre-link function is used so that it gets executed before the post-link function that is used in the child directive.This will allow the handling of the events appropriately.
pre: function($scope, $elem, $attrs) {
//$on listen for the event in the relevant $scope(listen for the event emitted by the child directive)
$scope.$on(print, function (e, msg) {
console.log(msg);
});
}
};
}
};
});
exampleapp.directive(secondDirective, function() {
return {
link: function($scope, $elem, $attrs) {
//$emit an event upwards from the secondDirective directive.
$scope.$emit("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>
</div> // declare the child directive(secondDirective)
</body>
</html>
Note:- Since we are using $scope to fire events, this will communicate only with immediate parent or child scopes. But sometimes,there is a case when you need to communicate between siblings then you have to bring $rootScope which is the parent of all. The drawback of this approach is it is dependent on the location of the directives.
3. Using scope objects create trouble if other components or directives start editing data.
By using Isolated scopes we can make the directive reusable while shared scopes allows parent to flow down the directive.With using isolated scopes,we need to use local scope properties to communicate with the outer world.There are 3 properties-@, =, and &.
>>@ - used to access string variables outside the directive.
>>= - used when you need to make in-sync or two way binding between outer scope and isolated scope.
>>&-used to bind external functions. You can pass in a function that the directive can invoke.
For example:
var exampleapp = angular.module(exampleappt",[]);
exampleapp.controller(exampleCtrl",function($scope){
$scope.name = Munmun;
$scope.displayName = function(){
$scope.name = $scope.name;
};
});
exampleapp.directive(scopeDirective", function(){
return {
//declaring isolated scope that will not allow the penetration of parent controller into the directive
scope: {},
template: "<div>My name is : {{name}}</div>"+
//changing name into the input box will not change the name in the view(inside h2 tag)
Type your name : <input type='text' ng-model='name' />"
};
});
HTML:-
<div ng-app="exampleapp">
<div ng-controller="exampleCtrl">
<h2 ng-click=displayName()">My name is {{name}}.</h2>
<div scope-directive class='directive'></div>
</div>
</div>
0 Comment(s)