Event namespace for multiple child controllers in AngularJS

Question

I am trying to namespace events emitted by multiple child controllers of the same type. The problem is letting the parent know the child id. Consider the following scenario.

<div ng-controller="Parent">
  <div ng-include="child1"></div>
  <div ng-include="child2"></div>
  ... and so on, the parent decides which templates to include on the fly
</div>

<script type="text/ng-template" id="Child.html">
  <div ng-controller="Child">...</div>
</script>

function Parent($scope) {
  $scope.child1 = "Child.html";
  $scope.child2 = "Child.html";

  // The problem is setting these
  $scope.childId1 = 1;
  $scope.childId2 = 2;

  $scope.on($scope.childId1 + ".someEvent", function() {
    // Handle event from child 1
  });
  $scope.on($scope.childId2 + ".someEvent", function() {
    // Handle event from child 2
  });
} 

function Child($scope) {
  $scope.id = getNewId();

  // Here I would like to do something like
  $parent[someKey] = $scope.id;

  // So that I can emit events like this
  $scope.someEvent = function() {
    $scope.$emit($scope.id + ".someEvent", data);
  }
}

So I think the problem has two parts.

1.) How do I pass someKey from the parent to the child.

2.) How do I set someKey on the parent scope from within the child. Would like to avoid using $parent. Not even sure if this variable is available in the controller?

koolunix · Accepted Answer · 2014-01-29 16:58:00Z

1

Use the messaging to transmit the id you want to use

I would switch your "$on" message in your parent to look like this:

$scope.on(".someEvent", function(event,data,id) {
    switch(id) {
        case 1:
            // Handle event from child 1
        case 2:
            // Handle event from child 2
    }

  });

And your emit messaging to look like this:

$scope.someEvent = function() {
    $scope.$emit(".someEvent", data, $scope.id);
  }

answered Jan 29, 2014 at 16:58

koolunix

1,99516 silver badges25 bronze badges

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

3 Comments

mozey Over a year ago

My parent does not know the child id. I want to give each controller a unique id by making a call to a service.

koolunix Over a year ago

My solution is in the following fiddle: jsfiddle.net/lesouthern/5DZGv Please elaborate if this is not what you are describing

mozey Over a year ago

The problem with this solution is that $rootScope.$on('childEvent' is a catch all handler. I want to be able to register handler that listen to a specific child only.

mozey · Accepted Answer · 2014-02-01 17:29:58Z

I have managed to solve my problem by creating a loadController directive. This directive sets a parent key on the child, and this allows me to create handlers for events from a specific child instance only. In my question I tried to set the child id on the parent. I ended up doing it the other way around, i.e. make the parent set an id on the child. So in the parent I would do

$scope.$on($scope.id + ".child1.click", function(event, data) {
  $scope.messages.push(data);
});

Where the string "child1" is whatever the parent wants to make it. And in the child I would emit like this

$scope.$emit($scope.key + ".click", data);

Notice that

$scope.id + ".child1" == $scope.key

For a full example see this http://plnkr.co/edit/2CdzQSKgWODIRvL5OZ9O

Collectives™ on Stack Overflow

Event namespace for multiple child controllers in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related