Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Exposing ng- properties for directive
Message
 
 
À
29/07/2015 10:48:36
Information générale
Forum:
Javascript
Catégorie:
Autre
Divers
Thread ID:
01622610
Message ID:
01622647
Vues:
33
>>>>>>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.
>>>>>
>>>>>'smDateTimePicker' and data-sm:-time-picker ?
>>>>
>>>>Yes, it's the same directive as AngularJs has some rules and when we use Camel case for myDirective it becomes my-directive when it's used. When you add data prefix (to avoid JavaScript warnings in VS), it becomes data-my:directive.
>>>>
>>>>But you didn't answer my question. I suppose the only way is to introduce readonly flag in the directive properties.
>>>
>>>Where do you have a "TimePicker" directive. I see a "DateTimePicker"
>>
>>Do you mean this portion in the template
>>
>>
>><span class="input-group-addon datepickerbutton">
>>>>>        <i class="fa fa-clock-o"></i>
>>>>>    </span>
>>
>>or what exactly do you mean?
>>
>>If that, then it's from the macadmin theme we have, I think, but I can make a quick research on this. It's not too relevant to the question, though, I think.
>
>I simply mean that your directive is named 'smDateTimePicker' and the element is 'data-sm:-time-picker'
>Don't see how you expect those to wire up.....

Oops, you're right :) I guess I posted the wrong directive. Let me post the right one then (we do have a few similar directives, one to pick up date (and optionally time) and the other just to pick time, in that form I'm using the one to pick only time, but I'd like to introduce readonly for both of them and also for the one we're using as a range).
If it's not broken, fix it until it is.


My Blog
Précédent
Répondre
Fil
Voir

Click here to load this message in the networking platform