After struggling for the past 4 hours, I am still trying to solve this issue. The main problem lies within a parent directive that is being dynamically compiled into the DOM. Inside this directive, there is a component that is being transcluded.
$compile('<edit-modal entry="entry" positions="positions" day="day" is-filled="isFilled" week-start-date="weekStartDate" available-tags="availableTags" minigrids="minigrids">' +
'<ns-gap-requests gap="entry" minigrids="minigrids"></ns-gap-requests></edit-modal>')(scope);
In the editModal HTML, the component is rendered as follows:
<div id="gapRequestsBody" ng-if="onGapRequest" ng-transclude></div>
This is the parent directive code snippet:
return {
restrict: 'E',
replace: 'true',
transclude:"true",
templateUrl: 'Scripts/NewScheduler/Templates/Modals/editModal.html',
scope: {
positions: '<',
entry: '=',
day: '<',
weekStartDate: '<',
availableTags: '<',
minigrids: '<'
},
controller: ['$scope', '$element', function ($scope, $element) {
$scope.$parent.child = $scope;
$scope.onGapRequest = false;
$scope.changeToOnGapRequestPage = function() {
$scope.onGapRequest = true;
}
...
Below is the child component code:
(function() {
'use strict';
angular.module('newScheduler').component('nsGapRequests',
{
require:{editModalCtrl : "^editModal"},
bindings: {
gap: "=",
minigrids:"<"
},
templateUrl: "Scripts/NewScheduler/Templates/Modals/nsGapRequestsModal.html",
controller: [function () {
var self = this;
self.$onInit = function() {
console.log(self);
}
console.log(self.gap);
console.log(self.minigrids);
if (!self.assignToOption) {
self.assignToOption = { chosenRequester: null };
}
self.requesters = self.minigrids.map(function (minigrid) {
return minigrid.gridRows;
}).reduce(function(a, b) {
return a.concat(b);
})
.map(function (gridRows) {
return gridRows.user;
})
.filter(function (value, index, array) {
return array.indexOf(value) === index;
})
.filter(function(user) {
return self.gap.requests.indexOf(user.id) !== -1;
});
}],
controllerAs: "gapRequests"
});
})();
I am stuck because I cannot access the parent controller: console log of the child component members
Unexpectedly, editModalCtrl appears empty, which should not be the case!
If anyone could provide some assistance with this issue, it would be greatly appreciated. Thank you in advance.