Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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...

share|improve this question
    
Can you provide link for jsfiddle? –  JQuery Guru Feb 22 at 7:45
1  
is it the same issue/resolution to your other question - the radio button one? I.E change ngModel to $parent.ngModel ? –  Darren Feb 22 at 15:08
    
@Darren: nopes... this is a different issue...got it resolved using $compile.. –  HarishR Feb 23 at 12:06

1 Answer 1

up vote 2 down vote accepted

use compile function instead of linking function example below, u can use fieldHtml function to get generated html

var compileFunction = function (element) {
        return function (scope) {
            var template = fieldHtml(scope.options);
            element.html(template);
            $compile(element.contents())(scope);
        };
    };
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.