$emit vs callback in parent child directive communication best approach - angularjs

Question

Im trying to understand what is the best GENERIC approach to communicate between parent and child directive with isolated scopes (they might be reusable items).
meaning if child directive needs to update parent directive in some manner (both have isolated scopes),
should I
pass a callback function :
e.g:
.directive('filterReviewStepBox', function () {
return {
restrict: 'EA',
scop: {
//some data
},
template: '<div>text<reusable-dir></reusable-dir call-back="foo"></div>',
link: function (scope, elem, attrs) {
scope.foo = function () {
console.log('bar');
};
}
};
}).directive('reusableDir', function () {
return {
restrict: 'EA',
scope: {
callBack: '=callBack'
//other data
},
template: '<div>text<button type="button" ng-click="bar"></button></div>',
link: function (scope, elem, attrs) {
scope.bar = function () {
scope.callBack();
}
}
};
});
or should I use $emit():
e.g:
directive('filterReviewStepBox', function () {
return {
restrict: 'EA',
scope: {
// some data
},
template: '<div>text<reusable-dir></reusable-dir></div>',
link: function (scope, elem, attrs) {
scope.$on('foo', function () {
console.log('bar');
});
}
};
}).directive('reusableDir', function () {
return {
restrict: 'EA',
scope: { //some data
},
template: '<div>text<button type="button" ng-click="bar"></button></div>',
link: function (scope, elem, attrs) {
scope.bar = function () {
scope.$emit('foo');
};
}
};
});
I feel that emit would be easier to understand on a larger scale but worried about performance and overhead, but Im still unsure
tried looking for the best approach online but Im still stomped
EDIT
I forgot about the
require
option.
but I'm still not sure this is the most correct solution.
Since this doesn't allow me to reuse the child or grandchild and kind of makes the directive a single purpose item.

Answer 1

For this purpose the best is to utilize "require" attribute.
Complete guide to directives tell us this about require attribute : https://docs.angularjs.org/api/ng/service/$compile
Require another directive and inject its controller as the fourth
argument to the linking function. The require takes a string name (or
array of strings) of the directive(s) to pass in.
Require just tells the directive it should look for some parent directive and take its controller. You can tell directive to search in parent elements with ^ prefix and tell if this requirement is optional with ? prefix.
I have modified your example, so reusableDir can call filterReviewStepBox controller, but can be also used alone.
http://jsbin.com/gedaximeko/edit?html,js,console,output
angular.module('stackApp', [])
.directive('filterReviewStepBox', function () {
return {
restrict: 'EA',
scope: {
// some data
},
template: '<div>text<reusable-dir></reusable-dir></div>',
link: function (scope, elem, attrs) {
},
controller : function() {
this.notify = function(value) {
console.log('Notified : ' + value);
};
},
controllerAs: 'vm',
bindToController: true
};
}).directive('reusableDir', function () {
return {
restrict: 'EA',
scope: { //some data
},
require: '?^filterReviewStepBox',
template: '<div>text<button type="button" ng-click="bar()"></button></div>',
link: function (scope, elem, attrs, controller) {
scope.bar = function () {
if (controller) {
controller.notify('foo');
}
};
}
};
});

Answer 2

Personally, I try to avoid generating my own custom events. Mainly because it's incredibly easy to cause unwanted event propagation, or bubbling (often causing unwanted scope digests), but also because of the systematic 'noise' that in bigger applications can become very hard to manage.
My own personal views aside though, and if it's a more 'future-proof' approach you're looking for, the callback approach is by far the safest. Here's why...
Angular2 encourages developers to expose onChange attributes from directives and components that depend on child-to-parent communication. Note that these are nothing more than bound functions, and should be defined accordingly in the bindings or scopes of the given component or directive.
Similar to the above, Angular2 documents an ngOnChanges method that can be defined by any controller wishing to subscribe to changes to it's bindings. If supplied, this method is called before any DOM manipulation occurs (with the new bound values), so it's a perfect candidate for a more 'general' parent to child communication over the current AngularJS $scope.$watch implementation.
Something that wasn't mentioned however, is that communication via services is still recommended, in both AngularJS and Angular2.
ngOnChanges: https://angular.io/docs/js/latest/api/core/OnChanges-interface.html

Answer 3

I think it is not just about the performance, you also need to take few more factors into consideration from design and maintenance perspective.
Callback method: This is perhaps the most efficient option. The child directive would just call one method of parent directive, no
overheads. There are quite a few options explained here:
https://stackoverflow.com/a/27997722/2889528
Emit (or for that matter broadcast): This method publishes the event to all $scope(s) up (emit) or down (broadcast) to hierarchy,
relatively costly but it gives you a flexibility to watch and handle
the event wherever $scope is available.
Injectable Common Service: This option can be used when you want to call some method where $scope is not available. However, it created tight dependency on service. This is more of a
pub-sub design.