I've been scouring the internet for a solution to my problem, but I still haven't found it.
In my application, I have a directive that enables users to sort and search through various lists of items. These items can vary in type and usage, leading me to pass different html templates into the directive with specific requirements. To accommodate this flexibility, I have created multiple directives with transclusion. However, I am struggling with scoping issues while trying to pass the isolated scope to the child directive.
Here is a snippet of my code:
Item List Directive
// Angular module definition
var app = angular.module('main');
// Item list directive declaration
app.directive('itemList', function(){
var linkFunction = function (scope, element, attributes, ctrl, transclude) {
// Scope modifications go here
scope.pagedItems = groupItemsToPages(items);
scope.currentPage = 0;
};
return {
restrict: 'E',
replace: 'true',
transclude: true,
templateUrl: 'partials/directives/item-list.html',
link: linkFunction,
scope: {
searchPlaceholder: "@",
items: "=",
control: "="
}
};
});