Hi everybody,

I have the following directive:

app.directive('smDateTimePicker', [function () {
        return {
            require: 'ngModel',
            restrict: 'E',

            scope: {
                ngModel: '=',//the date being saved to the database
                compareDate: '=',//either the start or end date of the range for validation (isDateRange attr must be set to true)
                form: '=',//the name of the form (if a subform, this will be parent.subform), used for setting the form to dirty and validation
                name: '@',//the input's name, used to manually outline invalid fields in red
                placeholder: '@',//text of placeholder on input field, 
                showBod: '=',//if true, we display the Beginning of Day button (pickTime must be true)
                showEod: '=',//if true, we display the End of Day button (pickTime must be true)
                showNow: '=',//if true, we display the Now button
                setBod: '&',//function defined in the directive that is called when clicking on the BOD button
                setEod: '&',//function defined in the directive that is called when clicking on the EOD button
                setNow: '&',//function defined in the directive that is called when clicking on the Now button
                validStartDateRange: '&',//function defined in the directive that determines whether to show validation message
                validEndDateRange: '&',
                validRequired: '&',
                validFutureDate: '&',
                validPastDate: '&'
            }

and the template is

<div class="input-group">
    <input type="text" autocomplete="off" id="{{name}}" name="{{name}}" class="form-control" placeholder="{{placeholder}}" />
    <span class="input-group-addon datepickerbutton">
        <i class="fa fa-clock-o"></i>
    </span>
</div>
<div class="field-validation-error">
    <span ng-show="!validTimeRange()">@Messages.invalidStartTime</span>    
</div>

So, in my form I have it

<data-sm:-time-picker ng-model="result.bHoldExpires"
                                                          form="form.editMax4saleGeneralForm.subCategoriesRow"
                                                          class="col-md-9"
                                                          ng-readonly="!result.isbHold" 
                                                          name="bHoldExpires"
                                                          placeholder="00:00"
                                                          is-time-range="false">
                                    </data-sm:-time-picker>

and ng-readonly has no effect and also I can type anything (all letters) in the textbox. I am wondering if we should have a simple way of exposing the readonly property.

Thanks in advance.