Leveraging ng-transclude and the require attribute for effective communication between directives

Question

Leveraging ng-transclude and the require attribute for effective communication between directives

I'm working with two directives, let's call them:

angular.module('app').directive('directiveX', directiveX);

    function directiveX(){
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            templateUrl: 'directiveX.html',
            controller: function($scope){
                $scope.data="some data";
            }
        };
    }

And the second one:

angular.module('app').directive('directiveY', directiveY);

function directiveY(){
    return {
        restrict: 'E',
        require: '^directiveX',
        transclude: true,
        scope: {},
        templateUrl: 'directiveY.html',
        link: function(scope, elem, attrs, directiveXController) {
            console.log("directiveY linked");
        }
    };
}

HTML structure for directiveX:

<div>
<!-- content here -->
    <div ng-transclude></div>
</div>

HTML structure for directiveY:

<div>{{data}}</div>

Now, I want to use them in this manner:

<directive-x>
     <directive-y></directive-y>
</directive-x>

How can I establish communication between them using require and ng-transclude and ensure that both templates are rendered? For instance, I wish to display the data variable from directiveX in the directiveY template. As a newcomer to directives and transclusion, any guidance would be appreciated.

javascript angularjs angularjs-directive transclusion angularjs-ng-transclude

Answer 1

Answer №1

There are various ways to establish communication:

Utilize $broadcast or $emit depending on your scope. Refer to this Stack Overflow question. Broadcasting to $rootScope is recommended as it allows all child components to listen to events.
Implement a callback function (specifically for the child directive).
Implement the Observer pattern.

Check out my demonstration code below or on this jsfiddle.

angular.module('demoApp', [])
.controller('mainController', function($scope) {

})
.service('interDirCom', function() {
    // Observer pattern
    var self = this;
    
    angular.extend(this, {
        subscribers: [],
        subscriberCount: 0,
        newSubscriber: function(callback) {
            return {
                id: self.subscriberCount++,
                notify: callback
            };
        },
        subscribe: function(callback) {
            // Add listener
            var subscriber = self.newSubscriber(callback);
            self.subscribers.push(subscriber);
        },
        notify: function(message){
            console.log('notify', this, self, self.subscribers);
            angular.forEach(self.subscribers, function(subscriber) {
                console.log(subscriber, message);
                subscriber.notify(message);
            });
        }
    });
})
.directive('directiveA', directiveA)
.directive('directiveB', directiveB);

function directiveA() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'directiveA.html',
        controller: function ($scope, $rootScope, interDirCom) {
            
            interDirCom.subscribe(function(message) {
                //console.log('callback of subscriber called');
                $scope.test2 = message;
            });
            
            $scope.test = "test data";
            this.test = 'hello from controller A in dir. B';
            
            $rootScope.$on('dirB:test', function(evt, data) {
                console.log('received event', data);
                $scope.test = data.message;
            });
            
            this.callback = function(message) {
                $scope.test2 = message;
            };
        }
    };
}

function directiveB(interDirCom) {
    return {
        restrict: 'E',
        require: '^directiveA',
        transclude: true,
        scope: {},
        templateUrl: 'directiveB.html',
        link: function (scope, elem, attrs, directiveACtrl) {
            console.log("directiveB linked");
            //scope.test = "hello from B";
            scope.test = directiveACtrl.test;
            
            scope.$emit('dirB:test', {message: 'Hello from directive B in dir. A with a $emit to $rootScope'});
            directiveACtrl.callback('I am added with a callback function from dir. B. to dir. A');
            interDirCom.notify('Message from dir. B with observer pattern');
            console.log(interDirCom);
        }
    };
}

directive-b div{
    background-color: green !important;
}

directive-a>div{
    background-color: lightgray;
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="directiveA.html">
        <div>
            <h1>Directive A</h1>
            {{test}}<br/>
            {{test2}}
            <!-- something here -->
            <div ng-transclude></div>
        </div>
    </script>
    <script type="text/ng-template" id="directiveB.html">
        <div>
        <h1>Directive B</h1>
        <div>{{test}}</div>
            <div>{{test2}}</div>
        </div>
    </script>
    <directive-a>
        <directive-b></directive-b>
    </directive-a>
</div>

Answer 2

There are various ways to establish communication:

Utilize $broadcast or $emit depending on your scope. Refer to this Stack Overflow question. Broadcasting to $rootScope is recommended as it allows all child components to listen to events.
Implement a callback function (specifically for the child directive).
Implement the Observer pattern.

Check out my demonstration code below or on this jsfiddle.

angular.module('demoApp', [])
.controller('mainController', function($scope) {

})
.service('interDirCom', function() {
    // Observer pattern
    var self = this;
    
    angular.extend(this, {
        subscribers: [],
        subscriberCount: 0,
        newSubscriber: function(callback) {
            return {
                id: self.subscriberCount++,
                notify: callback
            };
        },
        subscribe: function(callback) {
            // Add listener
            var subscriber = self.newSubscriber(callback);
            self.subscribers.push(subscriber);
        },
        notify: function(message){
            console.log('notify', this, self, self.subscribers);
            angular.forEach(self.subscribers, function(subscriber) {
                console.log(subscriber, message);
                subscriber.notify(message);
            });
        }
    });
})
.directive('directiveA', directiveA)
.directive('directiveB', directiveB);

function directiveA() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'directiveA.html',
        controller: function ($scope, $rootScope, interDirCom) {
            
            interDirCom.subscribe(function(message) {
                //console.log('callback of subscriber called');
                $scope.test2 = message;
            });
            
            $scope.test = "test data";
            this.test = 'hello from controller A in dir. B';
            
            $rootScope.$on('dirB:test', function(evt, data) {
                console.log('received event', data);
                $scope.test = data.message;
            });
            
            this.callback = function(message) {
                $scope.test2 = message;
            };
        }
    };
}

function directiveB(interDirCom) {
    return {
        restrict: 'E',
        require: '^directiveA',
        transclude: true,
        scope: {},
        templateUrl: 'directiveB.html',
        link: function (scope, elem, attrs, directiveACtrl) {
            console.log("directiveB linked");
            //scope.test = "hello from B";
            scope.test = directiveACtrl.test;
            
            scope.$emit('dirB:test', {message: 'Hello from directive B in dir. A with a $emit to $rootScope'});
            directiveACtrl.callback('I am added with a callback function from dir. B. to dir. A');
            interDirCom.notify('Message from dir. B with observer pattern');
            console.log(interDirCom);
        }
    };
}

directive-b div{
    background-color: green !important;
}

directive-a>div{
    background-color: lightgray;
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="directiveA.html">
        <div>
            <h1>Directive A</h1>
            {{test}}<br/>
            {{test2}}
            <!-- something here -->
            <div ng-transclude></div>
        </div>
    </script>
    <script type="text/ng-template" id="directiveB.html">
        <div>
        <h1>Directive B</h1>
        <div>{{test}}</div>
            <div>{{test2}}</div>
        </div>
    </script>
    <directive-a>
        <directive-b></directive-b>
    </directive-a>
</div>

Leveraging ng-transclude and the require attribute for effective communication between directives

Answer №1

Similar questions

Error in Angular Google Maps Component: Unable to access the 'nativeElement' property as it is undefined

The Angularfire library encountered an issue when trying to access the 'push' property of a null object

Map checkboxes aren't updating after an array update following a refactor to react hooks

A guide on adding specific rows together in a list

How to retrieve a value from PHP using Ajax?

Issues with jQuery function arising post-update to newer jQuery version

Retrieving HTML elements from the website address

Cypress: harnessing the power of regular expressions within jQuery selectors for the ":contains()" method

Safari re-downloads background image when revisiting with jQuery CSS

The user could not be deserialized from the session

AngularJS refrains from computing expressions

"Encountering a problem with posting API requests using Express

Managing errors within AngularJS in your controller.js file

Problem with $http.post() in Angular where Codeigniter is not able to receive data

Exploring data visualization within a JSX Component

What is the best way to give a fixed height to Card content in Material UI? Is CSS the way to go?

What is the reason for not using ng-attr-width to set the width of this SVG?

Achieving optimal performance with scoped CSS in Vue.js

Adding JSON data to a MySQL column in JSON format with the help of NodeJS

When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative