Check if controller has passed optional function down to *child* directive - angularjs

Question

I have a scenario as follows:
Controller A >> Directive "parent" >> Directive "child"
Controller B >> Directive "parent" >> Directive "child"
Both directives have isolated scopes, and I cannot use transclusion.
Controller A defines a function that is passed down to the child directive (using the "&?" notation in both directives).
<div parent fx="doFx()"></div>
Controller B does NOT specify that function.
<div parent></div>
The parent directive simply passes down the function to the child directive.
<div child fx="doFx()"></div>
How can I check in the child directive (without accessing the parent's scope) whether or not the controller did in fact pass a function?
Thanks in advance for any pointers!

Answer 1

Well it is possible with third argument passed to linking function.
angular.module('app', []);
angular.module('app').controller('Example', function () {
this.fn1 = function () {
return true;
};
});
angular.module('app').directive('someDir', function () {
return {
restrict: 'E',
template: '{{isPassed}}',
scope: {
fx: '&'
},
link: function (scope, element, attrs) {
scope.isPassed = attrs['fx'] !== undefined && attrs['fx'].length > 0;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
A: <some-dir></some-dir> <br>
B: <some-dir fx></some-dir><br>
C: <some-dir fx="Ex.fn1"></some-dir>
</div>
edit:
You can also use specific return value.
const PASSED = 'PASSED';
angular.module('app', []);
angular.module('app').controller('Example', function() {
this.fn1 = function() {
return PASSED;
};
});
angular.module('app').directive('parent', function () {
return {
restrict: 'E',
template: '<child fx="fx()"></child>',
scope: {
fx: '&'
}
};
});
angular.module('app').directive('child', function () {
return {
restrict: 'E',
template: '{{isPassed}}',
scope: {
fx: '&'
},
link: function (scope) {
scope.isPassed = scope.fx() === PASSED;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
A: <parent></parent><br>
B: <parent fx="Ex.fn1()"></parent><br>
</div>
But in my opinion best solution would be to use first attrs to check if fx is passed and explicitly pass isPassed to child directive.
angular.module('app', []);
angular.module('app').controller('Example', function() {
this.fn1 = function() {};
});
angular.module('app').directive('parent', function () {
return {
restrict: 'E',
template: '<child fx="fx()" is-passed="isPassed"></child>',
scope: {
fx: '&'
},
link: function (scope, element, attrs) {
scope.isPassed = attrs['fx'] !== undefined && attrs['fx'].length > 0;
}
};
});
angular.module('app').directive('child', function ($timeout) {
return {
restrict: 'E',
template: '{{isPassed}}',
scope: {
fx: '&',
isPassed: '<'
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
A: <parent></parent><br>
B: <parent fx="Ex.fn1()"></parent><br>
</div>