While attempting to develop a custom calendar in AngularJS, I encountered an issue with passing values to the isolated scope within the directive. Despite my efforts, I am unable to access these values on the directive's scope and I am struggling to understand why.
app.directive("calendar", calendar);
function calendar() {
return {
restrict: "E",
templateUrl: "calendar.html",
scope: {
selected: "=",
show: "=",
avilDates: "="
},
link: function(scope) {
console.log('scope.avilDates' + scope.avilDates);
}
}
}
app.controller('addDetailExpController', function($scope) {
$scope.avilDates1 = [];
$scope.$watch('avilDates', function() {
console.log('avilDates', $scope.avilDates)
});
$scope.genAvailDate = function(exp) {
console.log('genAvailDate Working');
console.log(exp);
var result = [];
exp.options.forEach(function(option) {
if (typeof option.slots != 'undefined') {
option.slots.forEach(function(slot) {
if (typeof slot.dates != 'undefined') {
slot.dates.forEach(function(date) {
result.push(moment.unix(date.date).format("MM/DD/YYYY"));
});
}
});
}
});
console.log(result);
return result.reduce(function(a, b) {
if (a.indexOf(b) < 0) a.push(b);
return a;
}, []).map(function(a) {
return new Date(a);
});
}
});<div ng-controller="addDetailExpController" ng-init="avilDates=genAvailDate(selected)">
<calendar selected="addDate.date" show="showdate" avilDates="avilDates" ng-show="showdate"></calendar>
</div>Although I am successfully obtaining results from genAvailDate, I am facing difficulties in retrieving this data within the directive itself.