i am using angular-ui-datepicker to render datepicker and i am trying customize the option through js...
the directive looks like below
csapp.directive("csDateField", function () {
//options: minViewMode, daysOfWeekDisabled, startDate, endDate
var templateHtml = function () {
return '<div ng-form="myform">' +
'<div class="control-group" class="{{options.class}}">' +
'<div class="control-label">{{options.label}} {{ options.required ? "*" : ""}} {{options.minViewMode}} </div>' +
'<div class="controls">' +
'<div class="input-append">' +
'<input type="text" name="myfield" class="input-medium" data-ng-model="ngModel" ' +
' data-ng-required="options.required" data-date-min-view-mode="{{options.minViewMode}}" ' +
' data-date-days-of-week-disabled="{{options.daysOfWeekDisabled}}" data-date-format="{{options.format}}" ' +
' placeholder="{{options.placeholder}}" bs-datepicker >' +
'<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> ' +
'</div>' +
'<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' +
'<div data-ng-show="myform.myfield.$error.required">{{options.label}} is required!!!</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
};
return {
scope: { options: '=', ngModel: '=' },
required: ['ngModel', '^form'],
restrict: 'E',
template: templateHtml,
};
});
so what i am trying to achieve is to render datepicker like:
<cs-date-field options="birthdate" ng-model="date2"></cs-date-field>
and to pass parameters from js:
$scope.birthdate = { label: "BirthDate", required: true, minViewMode: "months" };
though the required attribute is working,, the minViewMode is not working... the value which is passed to the minViewMode parameter is: {{options.minViewMode}} rather than its actual value...
the angular version is 1.0.7. i tried using $compile like below in linking function
element.html(templateHtml());
$compile(element.contents())(scope);
but this also does not work...
ngModel
to$parent.ngModel
? – Darren Feb 22 at 15:08