I've created 2 directives: Parent and Child. Trying to get them to talk to one another. It seems if they both have a scope they don't receive the events. This doesn't seem correct according to the documentation which $emit states: Dispatches an event name upwards through the scope hierarchy notifying the registered ng.$rootScope.Scope#methods_$on listeners.
So surely that should bubble up through scopes?
Isolate scope is now available only to the isolate directive that requested it and its template.
here is a plunker: http://plnkr.co/edit/EfKJthkQLitWnF2srykM?p=preview
You can create the child directive as a template of the parent directive, because template directives do get the directive's scope as mentioned above.
.directive('parent', function ($timeout) {
return {
template:'<child name="Jimmy"></child>',
Another solution would be to create a controller on the parent directive and to require it in child directives.
.directive('parent', function ($timeout) {
return {
controller: function(){
this.hungry = function(message){
// something
}
}
child directive:
.directive('child', function ($timeout) {
return {
require: "^parent",
link: function (scope, element, attrs, parentCtrl) {
parentCtrl.hungry("I'm hungry!")
require: "?^parent" to optionally require a parent directive's controller. From $compile docs: Attempt to locate the required controller by searching the element's parents or pass null to the link fn if not found.In your example both directives have isolated scopes from the same parent scope, so they do not have parent/child relationship.
To get it work as you expected you may specify scope: true instead of scope: {...}. In this case the scope of child directive will be really child scope of parent directive's scope.
