Event namespace for multiple child controllers in AngularJS - 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?

Answer 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);
}

Answer 2

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