Passing Arugments to $on() in AngularJS from $emit() and $broadcast()


For whatever reason, this article doesn’t exist yet.

So you want to send data from one Controller to another. Maybe that means from a parent controller down to a child controller, or maybe from a child controller up to a parent. This is the missing piece to your puzzel.

Here’s my HTML for this example

<body ng-app>
  <div ng-controller="ParentCtrl">
    <p>{{foo}}</p>
    <div ng-controller="ChildCtrl">
      <button ng-click="onButtonClick()">{{buttonTitle}}</button>
    </div>
  </div>
</body>

As you can see there is a div that’s acting as the Parent Controller, and an inner div acting as the Child Controller.
Lets set that up in JavaScript

function ParentCtrl($scope){
 $scope.foo = "Hello";

 //Emit to Parent example part 2
 $scope.$on("UPDATE_PARENT", function(event, message){
   $scope.foo = message;   
 });
}

function ChildCtrl($scope){
  $scope.buttonTitle = "Update Parent";
  $scope.onButtonClick = function(){
    //Emit to Parent example part 1
    this.$emit("UPDATE_PARENT", "Updated");
  };
}

There is no documentation online that talks about the argument syntax of the callback you specify during $on(event, callback).

The first argument is the event itself that is being bubbled through to the Parent Controller’s $scope object. After that though, you’re on your own for how you implement the additional arguments. In this case, in my $emit() function I’m specifying the string “Updated”. And in the second step I’m retrieving the string via the message parameter.

Using $broadcast

Lets dispatch a $broadcast from the Parent Controller.

function ParentCtrl($scope){
 $scope.foo = "Hello";

 //Emit to Parent example part 2
 $scope.$on("UPDATE_PARENT", function(event, message){
   $scope.foo = message;

   //Broadcast to Child example part 1
   $scope.$broadcast("DO_BIDDING", {
     buttonTitle : "Taken over",
     onButtonClick : function(){
       $scope.foo = "HAHA this button no longer works!";
     }
   });

 });
}

function ChildCtrl($scope){
  $scope.buttonTitle = "Update Parent";
  $scope.onButtonClick = function(){

    //Emit to Parent example part 1
    this.$emit("UPDATE_PARENT", "Updated");
  };

  //Broadcast to Child example part 2
  $scope.$on("DO_BIDDING", function(event, data){
    for(var i in data){
      $scope[i] = data[i];
    }
  });

}

Live Example

Now I’m passing an Object to be sent along with the event. Inside of ChildCtrl’s $on() callback, I’m looping through the properties sent, and overwriting $scope‘s properties – A dirty/awesome scope hack.

You can also pass a lot more than 2 arguments with your $emit() and $broadcast() methods, and add lots of parameters to your $on() callback method to scoop them up

Copy from http://motionharvest.com/2013/03/21/passing-arugments-to-on-in-angularjs-from-emit-and-broadcast/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s