The functionality of broadcasting events and using the 'on' method seems to be malfunctioning

Question

The functionality of broadcasting events and using the 'on' method seems to be malfunctioning

I'm facing an issue where I am attempting to send an event from one controller to another and listen for it, but the data is not being displayed on the DOM. Interestingly, there are no errors present. When displaying regular $scope variables from both controllers, it works fine. It seems like the broadcast and on functionality are not working as expected, and since there are no errors, debugging becomes a challenge.

oneApp.controller("twoController",["$log","$scope","$rootScope",function($log,$scope,$rootScope){
var str ="sent from twoController ";
$scope.hey = 215;
$rootScope.$broadcast("hey",str);

}])

oneApp.controller("twoChildController",    ["$log","$scope","$rootScope",function($log,$scope,$rootScope){
//var str ="sent from twoController ";
//$scope.display = str;
$scope.$on("hey",function(event,str){
$scope.display = str;
});

}])

If anyone could assist me in resolving this issue, I would greatly appreciate it.

javascript angularjs

Answer 1

Answer №1

When controller1 is initiated before controller2, a broadcast event occurs from controller1 before controller2 has registered with $on. To solve this issue, you can use $timeout.

var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, $rootScope, $timeout){
  $scope.name = "Roger";
  
  $timeout(function(){
    $rootScope.$broadcast('hey',$scope.name);
  });      
    
});

app.controller('myCtrl2',function($scope, $rootScope){
    $scope.$on('hey',function(event,name){
      $scope.name=name;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
     <span>myCtrl1 : {{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>myCtrl2 : {{name}}</span> 
</div> 
 
</body>

Answer 2

When controller1 is initiated before controller2, a broadcast event occurs from controller1 before controller2 has registered with $on. To solve this issue, you can use $timeout.

var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, $rootScope, $timeout){
  $scope.name = "Roger";
  
  $timeout(function(){
    $rootScope.$broadcast('hey',$scope.name);
  });      
    
});

app.controller('myCtrl2',function($scope, $rootScope){
    $scope.$on('hey',function(event,name){
      $scope.name=name;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
     <span>myCtrl1 : {{name}}</span>
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>myCtrl2 : {{name}}</span> 
</div> 
 
</body>

Answer 3

Answer №2

Here is one way to approach it:

To start, make sure all your broadcast events are defined in a central controller like this:

$rootScope.broadcast.actions = {
        hello : 'hello',
        // include all other broadcast events here
}

When you want to send a broadcast event:

$rootScope.$broadcast($rootScope.broadcast.actions.hello,{message});

And when you need to receive a broadcast event:

$scope.$on($rootScope.broadcast.actions.hello, function (event,message){
    $scope.displayMessage = message;
});

Answer 4

Here is one way to approach it:

To start, make sure all your broadcast events are defined in a central controller like this:

$rootScope.broadcast.actions = {
        hello : 'hello',
        // include all other broadcast events here
}

When you want to send a broadcast event:

$rootScope.$broadcast($rootScope.broadcast.actions.hello,{message});

And when you need to receive a broadcast event:

$scope.$on($rootScope.broadcast.actions.hello, function (event,message){
    $scope.displayMessage = message;
});

The functionality of broadcasting events and using the 'on' method seems to be malfunctioning

Answer №1

Answer №2

Similar questions

Steps to manage the time delay between mousewheel events triggering

Error in jQuery syntax when parsing a correctly formatted JSON object

Tips on how to stop jQuery DataTable tools from being redrawn following a page reload

Obtaining and implementing MongoDB array operations

Tips for displaying dynamic data in a bootstrap tooltip with HTML contentInstead of regular tooltips, you

Updating with Setstate

Bringing in d3js into Angular 2

Calculating numbers with Math.ceil will result in an increase of 1

What methods can I use to enhance the functionality of a constructor/prototype function?

Utilize a React Hook that fetches data from an API upon clicking two distinct buttons

What is the process of transferring JavaScript code to an HTML file using webpack?

Guide on exporting a reducer from a Node module built on React Redux

How can one extract dates from a range using mongoose?

Implementing class changes based on scroll events in JavaScript

When attempting to delete an item from Firebase using React, the re-render results in the item being

Axios is unable to retrieve data in React render, but it is successful when accessed through the console

Navigate through the options on the left menu by sliding your

The value of req.body.stripeToken is not defined

Unable to adjust the size of a DIV with a button click in Vue3

Set the background color of the Material UI Drawer component