I'm facing a challenge with utilizing a directive that was created by another developer to notify my directive when the ngRepeat inside of it has completed its creation.
My parent directive has an isolate scope and includes a function within its scope that needs to be triggered by the child directive. Below is the code snippet:
angular.module('my.directives')
.controller('myTableCtrl', function($scope, $element, $attrs) {
$scope.tableLoaded = function(tableName){
console.log("Table Loaded");
};
})
.directive('myTable', function() {
return {
restrict: 'EA',
scope: {},
controller: 'myTableCtrl as myTable'
};
})
.directive('repeatDone', function($timeout) {
return function(scope, element, attrs) {
if (scope.$last) {
$timeout(function(){
scope.$eval(attrs.repeatDone);
});
}
}
});
This is how my HTML appears:
<my-table>
<div ng-repeat="row in tableRows" repeat-done="tableLoaded('main');"></div>
</my-table>
Prior to adding the {scope:{}}, the myTable directive was encountering confusion when there were multiple tables on the page (triggering the tableLoaded function from the wrong child). Hence, I introduced the isolate scope as a best practice. However, this resulted in the repeated Done directive being unable to access/call the tableLoaded() function within the parent myTable directive.
I would greatly appreciate any assistance provided.
EDIT:
To clarify, tableLoaded() is a function associated with the myTable directive, and I aim to call it from the repeatDone directive, which could be nested several levels deep inside the table directive. Additionally, I do not wish to modify the repeatDone directive or have it acknowledge the existence of the myTable directive.