Running a function in a child directive from within its parent [angularJS]
So I completely do it in reverse all the time, using a directive property require: '^ParentCtrl'
inside a child directive. Usage requires you to then call the parent function; however I need to do it the other way around.
Question:
How can I call from the parent directive to execute the IN function in the child directive.
Note: 1. The Child directive has no function inside link:
2. Basically, I want the opposite to require.
Parent Directive:
'use strict';
angular.module('carouselApp')
.directive('waCarousel', function() {
return {
templateUrl: 'views/carousel/wa.carousel.html',
controller: function($scope) {
var self = this;
// this function is being called based on how many pages there are
self.carouselElLoaded = function(result) {
var count = 1;
Carousel.params.pageRenderedLength += count;
//when all the pages are loaded
if (Carousel.params.pageRenderedLength === Carousel.params.pageLength) {
Carousel.params.carouselReady = true;
// !!!!!!!! Trigger will go here!!!!!!!!!//
ChildCtrl.drawHotspots(); // (**for placement only**)
} else {
Carousel.params.carouselReady = false;
}
};
}
}
})
Directive for children:
'use strict';
angular.module('carouselApp')
.directive('waHotspots', function() {
return {
require: '^waCarousel',
link: function (scope, element, attrs, ctrl) {
//call this directive based on how
scope.drawHotspots = function () {...};
}
})
source to share
This is possible if the parent controller talks to the child controller through a well-defined API that you create. The idea is that you want to maintain loose communication between the parent and child directive, as long as each respective controller knows as little as possible about each other, but still has enough knowledge to do the job.
This requires the parent directive from the child directive and let the child directive register with the parent controller:
Child directive:
require: '^parentDirective',
controller: function(){
this.someFunc = function() {...}
},
link: function(scope,element,attr, parentCtrl){
parentCtrl.register(element);
}
Then, in your parent directive, implement the register function and get the child controller and call the child function as needed:
Parent Directive:
controller: function(){
var childCtrl = undefined;
this.register = function (element) {
childCtrl = element.controller();
}
this.callChildFunc = function (){
childCtrl.someFunc();
}
},
link: function (scope,element){
var ctrl = element.controller();
ctrl.callChildFunc();
}
source to share
You can always start it with $ watch. Just go to the value of the parent scope you want to look at and change its value.
Parent:
$scope.drawHotspots = false;
Template:
waHotspots the-trigger="drawHotspots"....
Directive for children:
localTrigger: '@' // Receive the value to watch
scope.$watch('localTrigger',function() {
// call drawHotspots if value is set to true
});
source to share