AngularJS: Share event from the parent component exclusively with its child components

Question

AngularJS: Share event from the parent component exclusively with its child components

I am looking to establish a way to broadcast an event from a parent directive to a specific child, without all children in every instance of the "parent" directive receiving it when using scope.broadcast in the parent directive link function.

Current Behavior: Currently, when the parent (1) broadcasts an event, both child (1.1) and child (2.1) receive the event.

Desired Behavior: I want to modify the functionality so that the event broadcasted from parent (1) is only received by child (1.1), excluding child (2.1).

In my directive, I have implemented code to check if an element is on the screen. I intend for only one directive to perform this function and be responsible for sending events to others.

<div>
    <div parent> <!-- 1 -->
        <div child></div> <!-- 1.1 -->
    </div>

    <div parent> <!-- 2-->
        <div child></div> <!-- 2.1 -->
    </div>
</div>

javascript angularjs angularjs-directive angular-broadcast

Answer 1

Answer №1

One possible explanation is that the parent directive and child directives share the same scope, causing events to propagate to all child directives.

The solution is for each directive to have its own scope that prototypically inherits from the parent. ($root <-- parent <-- child)

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e4ebe2f0e9e4f7abeff6c5b4abb1abb2">[email protected]</a>" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      angular
        .module('app', [])
        .directive('parent', function() {
          return {
            scope: true,
            link: function(scope, element) {
              element.on('click', function() {
                scope.$broadcast('parent-event');
              });
            }
          };
        })
        .directive('child', function() {
          return {
            scope: true,
            link: function(scope) {
              scope.$on('parent-event', function() {
                console.log('child(' + scope.$id + ') caught parent event');
              });
            }
          };
        });
    </script>
  </head>

  <body>
    <div>
      <div parent> Parent {{ $id }}
          <div child>Child {{ $id }}</div>
      </div>

      <hr />

      <div parent> Parent {{ $id }}
          <div child>Child {{ $id }}</div>
      </div>
  </div>
  </body>
</html>

Plunker

Answer 2

One possible explanation is that the parent directive and child directives share the same scope, causing events to propagate to all child directives.

The solution is for each directive to have its own scope that prototypically inherits from the parent. ($root <-- parent <-- child)

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e4ebe2f0e9e4f7abeff6c5b4abb1abb2">[email protected]</a>" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      angular
        .module('app', [])
        .directive('parent', function() {
          return {
            scope: true,
            link: function(scope, element) {
              element.on('click', function() {
                scope.$broadcast('parent-event');
              });
            }
          };
        })
        .directive('child', function() {
          return {
            scope: true,
            link: function(scope) {
              scope.$on('parent-event', function() {
                console.log('child(' + scope.$id + ') caught parent event');
              });
            }
          };
        });
    </script>
  </head>

  <body>
    <div>
      <div parent> Parent {{ $id }}
          <div child>Child {{ $id }}</div>
      </div>

      <hr />

      <div parent> Parent {{ $id }}
          <div child>Child {{ $id }}</div>
      </div>
  </div>
  </body>
</html>

Plunker

Answer 3

Answer №2

When broadcasting data, it is sent to all child scopes by default. One potential solution could be:

$scope.$broadcast('customEvent', {
    target: ['dir1', 'dir2'],
    someProp: 'Sending an Object!' // include any desired data
});

Then, in directive one:

$scope.$on('customEvent', function (event, data) {
   if(data.target.indexOf('dir1') === -1 ) return;
});

Answer 4

When broadcasting data, it is sent to all child scopes by default. One potential solution could be:

$scope.$broadcast('customEvent', {
    target: ['dir1', 'dir2'],
    someProp: 'Sending an Object!' // include any desired data
});

Then, in directive one:

$scope.$on('customEvent', function (event, data) {
   if(data.target.indexOf('dir1') === -1 ) return;
});

AngularJS: Share event from the parent component exclusively with its child components

Answer №1

Answer №2

Similar questions

Ways to conceal a badge using JavaScript

Leverage the power of JSON to efficiently represent a collection of string

How can I implement jQuery autocomplete with customized settings?

Capture a screenshot of the icons

Unlocking the power of keys in manipulating JSONP objects

Is it possible for the NextJS Client component to only receive props after rendering props.children?

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Integrating Dart with external libraries

I am experiencing some issues with React Router V4's functionality

What is the best way to implement a conditional check before a directive is executed in Angular, aside from using ng-if

What's the quickest method for duplicating an array?

What is the reason for not allowing return statements in the ternary operator?

Is it possible to circumvent the use of ng-repeat in any manner?

Exploring the world of AngularJS for the first time

Something seems off with the performance of Gulp-filter and it is not

Controller unable to access form inside ng-repeat loop in AngularJS

typescript: define the type of an object that behaves like a map

Screening data entries

Sending data from a file reader to a service in Angular JS