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>

Answer 1

<!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>

Answer 2

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

to

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

Answer 3

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

AngularJS $broadcast

3 个答案: