I'm currently working on a custom directive for my Angular application that provides basic functionality. In addition to the directive, I also want to include an attribute that acts as an additional settings option to enable extended functionality when specified.
Here's what I have in mind:
<div use-date-picker this-ngmodel="formData.dt" today></div>
For the custom directive above, I aim to have the datepicker input field display today's date only when the today attribute is present. However, I'm struggling with defining the function within the directive to set the default date to today only when the 'today' attribute is added to the DIV using the directive. My attempted solution doesn't seem to work:
app.directive('useDatePicker', function() {
return {
restrict: 'A',
replace:true,
scope: {
thisNgmodel: '='
},
template: '<div class="input-group">' +
'<input type="text" class="form-control" readonly="readonly" name="dt" ng-model="thisNgmodel" datepicker-popup="{{format}}" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" />' +
'</div> ',
link: function(scope, element, attr) {
console.log(scope.thisNgmodel);
console.debug(scope);
// Here I am trying to add the default Today's date if the 'today' attribute is included
if (element.attr('today')) {
$scope.today();
}
},
controller: function($scope) {
//DatePicker
$scope.today = function() {
$scope.thisNgmodel = new Date();
};
// ....... etc.. etc.. with other controller settings .......
}
};
});
Is it possible to incorporate additional functions into the directive template based on the presence of certain attributes? What might be the issue with my current code?