You could try require
if your directives are related.
app.directive('soundButton', function() {
return {
restrict: 'E',
scope: {
songName: '@'
},
require:"^fold",
link : function (scope,element,attrs,foldController){//inject fold controller
foldController.callFold("message"); //use the controller to communicate
}
};
});
app.directive('fold', function() {
return {
restrict: 'E',
scope: {
foldName: '@'
},
templateUrl: 'fold.html',
transclude:true,
controller:function(){ //declare the controller to be used by child directives.
this.callFold = function (message){
alert(message);
}
}
};
});
You cannot use $scope.$emit
because your directives' scopes don't have parent/child relationship. You could refer to this discussion for more information.
Update:
If your directives are not related and you need to have parent/child relationship, you could try custom transclusion:
app.directive('fold', function() {
return {
restrict: 'E',
scope: {
foldName: '@'
},
templateUrl: 'fold.html',
transclude:true,
compile: function (element, attr, linker) {
return {
pre: function (scope, element, attr) {
linker(scope, function(clone){ //bind the scope your self
element.children().eq(1).append(clone); // add to DOM
});
},
post: function postLink(scope, iElement, iAttrs) {
scope.$on("foldplay",function(event,data){
alert(data);
});
}
};
}
};
});
DEMO (click on the button and then click on the shown text)