This article presents concepts and code example around non-nested directives-to-directives communication in AngularJS. The demo for the code example presented later in this article can be accessed on this page, Demo – Non-nested Directives-to-Directives Communication. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
When the change in one or more attributes of one directive need to trigger one or more events in other directives resulting in updating of their attributes and related view, this can be termed as directive-to-directive communication. I, recently, open-sourced an Angular QuizApp which demonstrates the non-nested directive-to-directive communication. In the QuizApp, there are two directives, namely, iquestion and iscorecard. As one answers a question (iquestion directive), the score gets updated and displayed as part of iscorecard directive. Take a look at live example on following page: ATG Platform – Test 1
As the directives are non-nested, meaning not placed within each other, it presents challenge on how to have them communicate with each other. With nested directives, controllers within directives define APIs that are used to communicate with each other. With non-nested directives, one can have them communicate using following method:
Pay attention to some of the following in the code example below:
angular.module('HelloModule', [])
.directive( 'hello', function( helloservice) {
return {
restrict: "E",
scope:{
name: '@'
},
controller: function( $scope, helloservice ) {
$scope.updateName = function() {
helloservice.setName( $scope.name );
};
},
link: function( scope, element, attrs ) {
helloservice.setName( scope.name );
},
templateUrl: '/assets/templates/hello1.html'
}
})
.directive( 'bye', function( helloservice ) {
return {
restrict: "E",
scope:{
},
controller: function( $scope, helloservice ) {
$scope.name = helloservice.getName();
},
link: function( scope, element, attrs ) {
scope.$watch(function() {
return helloservice.name;
}, function() {
scope.name = helloservice.name;
});
},
templateUrl: '/assets/templates/bye.html'
}
})
.factory('helloservice', function(){
return new User();
});
function User() {
this.name = '';
this.setName = function( name ) {
this.name = name;
};
this.getName = function() {
return this.name;
};
}
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…