I have a function that I want to pass to a parent controller to use. The situation is a bit complex as I have a directive nested inside another directive, which is then nested inside a third directive (Directiveception). Unfortunately, I cannot combine them into one directive, so I am exploring if there is a more efficient way to achieve this.
Firstly, I have the outermost directive:
<div class="builder-result-filters" filter-obj="filterModelInstance" update-filter="filterClicked"> </div>
Then, there is a directive inside of that:
<div>
<ul ng-repeat="filter in filterObj.filters" class="builder-result-single-filter" filter="filter">
</ul>
Followed by another level:
<ul>{{filter.name}}
<li ng-repeat="item in filter.values track by $index" class="build-result-filter-value" val="item">
</li>
And lastly:
<li>
<input type="checkbox" ng-change="filterChange()" ng-model="val.checked"> {{val.name}}
I am trying to trigger the ng-change="filterChange()" function in the topmost directive. Initially, I thought about passing it down using isolate scope at each level like this:
scope: {
passedFunction: '=' //pass the function down to the bottom directive
}
However, I am curious if there is a simpler solution that avoids the need to pass it down through every level. Thank you for your time.