AngularJS $broadcast

Question

Please help me in my question. Why doesn't work function $broadcast when I call from parent controller and catch in the child controller?

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl1',
                function ($scope) {
                    $scope.$broadcast('parent', 'Some data');
                });

        app.controller('ctrl2',
                function ($scope) {
                    $scope.$on('parent', function (event, data) {
                        console.log(data); // 'Some data'
                    });
                });
    </script>
</head>
<body>
<div ng-controller="ctrl1">
    <div ng-controller="ctrl2">
    </div>
</div>
</body>
</html>

DK3 · Accepted Answer · 2016-04-07 11:14:36Z

4

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl1',
                function ($scope) {
                    $scope.$on("ready",function(){
                      $scope.$broadcast('parent', 'Some data');
                    });

                });

        app.controller('ctrl2',
                function ($scope) {
                    $scope.$on('parent', function (event, data) {
                       alert(data); // 'Some data'
                    });
                    $scope.$emit('ready');
                });
    </script>
</head>
<body>
<div ng-controller="ctrl1">
    <div ng-controller="ctrl2">
    </div>
</div>
</body>
</html>

answered Apr 7, 2016 at 11:14

DK3

4032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maksim Over a year ago

It was very useful for me. Thx!

Maksim Over a year ago

One question. Why emit must be on last line? And if move $emit upper than $scope.$on it is not works.

M. Junaid Salaat Over a year ago

@DK3 basically you are doing an emit first when the child controller is ready then listening it from parent and then using it to broadcast again. This is absolutely not practical and bad practice. this cause two propagations. which is unnecessary.

M. Junaid Salaat Over a year ago

@Maksim this method is working but this should not be considered for using in real applications because two propagations for a single method to work is unnecessary

DK3 Over a year ago

if you do so Maksim then again it you were just broadcasting your message for parent when the listener was not ready for child scope

|

Praveen Prasannan · Accepted Answer · 2016-04-07 10:44:59Z

1

Change $scope.$broadcast('parent', 'Some data');

to

 $scope.$broadcast('parent', {message:'Some data'});

answered Apr 7, 2016 at 10:44

Praveen Prasannan

7,15310 gold badges53 silver badges71 bronze badges

1 Comment

M. Junaid Salaat Over a year ago

No It is not necessary to send it as an object. see this, Its just the child is not ready for listening.

M. Junaid Salaat · Accepted Answer · 2016-04-07 10:55:33Z

1

I've made a fiddle from your code. You were just broadcasting your message when the listener was not ready.

Just broadcast your message when the controller2 is ready to listen.

var app = angular.module('app', []);
app.controller('ctrl1',
  function($scope, $timeout) {
    $timeout(function() {
      $scope.$broadcast('parent', 'Some data');
    }, 0)
  });

app.controller('ctrl2',
  function($scope) {
    $scope.$on('parent', function(event, data) {
      console.log(event, data); // 'Some data'
    });
  });

Hope this helps

answered Apr 7, 2016 at 10:55

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

5 Comments

Maksim Over a year ago

Do you have any alternative variants instead timeout?

M. Junaid Salaat Over a year ago

Well $timeout is not necessary here but to wait for the ctrl2 to be defined and come in its listening mode. Basically ctrl2 is inside ctrl1 and ctrl1 needs to be defined properly for the view inside it. now when the code inside ctrl1 initiates the listener is not loaded and is not in its state

M. Junaid Salaat Over a year ago

In the emit case timeout is not used fiddle

M. Junaid Salaat Over a year ago

emit propagates it to the parent controllers and broadcast do this for their child. emit is working because the listener on top of it is ready.

M. Junaid Salaat Over a year ago

@Maksim See this to understand. its just that the broadcast is fired before the child is ready to listen.

Collectives™ on Stack Overflow

AngularJS $broadcast

3 Answers 3

6 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related