Question

我刚刚编写了一个自定义指令，在我的应用中使用pikaday.js。我把所有东西都设置好了，它几乎可以做我想要的，但是我在验证方面遇到了很大的问题在我的指令中，我可以正确更新模型和视图值，但与输入名称关联的$ required属性不会更改这是我的指令代码：

appShared.directive('pikadayDatepicker', [function () {
    return {
        restrict: 'A',
        scope:{
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            var input = element[0];

            var updateFieldFunction = function (date) {
                scope.ngModel = date;
                scope.$apply();
            };

            var picker = new Pikaday({
                field: input,
                defaultDate: new Date(),
                setDefaultDate: true,
                onSelect: updateFieldFunction,
                minDate: moment(attrs.minDate, "DD/MM/YYYY hh:mm:ss").toDate(),
                format: attrs.format
            });
        }
    }

}
]);

这就是我在模板中调用我的指令的方式：

<form name="newForm" class="ng-invalid ng-invalid-required ng-dirty ng-valid-editable" novalidate="">
    <div class="form-group">
        <label for="Destinazione">Destinazione</label>
        <br>
        <input class="form-control ng-dirty ng-valid-required ng-valid ng-valid-editable" data-ng-class="{has_error: newForm.id.$invalid  &amp;&amp; newForm.id.$dirty }" required="true" data-typeahead-min-length="3" data-typeahead-editable="false" data-typeahead="dest as dest.Label for dest in iddestinations('/api/GetDestinations/?term=', 'HTL', $viewValue)" placeholder="Inserisci una destinazione..." autocomplete="off" name="id" data-ng-model="iddestination" type="text">
        <div class="help-block ng-hide" data-ng-show="newForm.id.$invalid &amp;&amp; newForm.id.$dirty">
            <span class="help-block ng-hide" data-ng-show="newForm.id.$error.required">Inserisci una destinazione!</span>
            <span class="help-block ng-hide" data-ng-show="newForm.id.$error.editable">Inserisci una destinazione tra quelle disponibili!</span>
        </div>
    </div>
    <div class="form-group">
        <label for="Data_partenza">Data partenza</label>
        <br>
        <div class="input-group date">
            <input class="form-control ng-isolate-scope ng-scope ng-pristine ng-invalid ng-invalid-required" data-ng-class="{has_error: newForm.beginDate.$invalid &amp;&amp; newForm.beginDate.$dirty}" required="required" data-pikaday-datepicker="" data-min-date="05/11/2013 00:00:00" data-format="DD/MM/YYYY" name="beginDate" data-ng-model="params.beginDate" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" data-toggle="datepicker">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </div>
        <div class="help-block">
            <span class="help-block" data-ng-show="newForm.beginDate.$error.required">Inserisci una data valida!</span>
            <h5 class="ng-binding">"2013-11-27T23:00:00.000Z"</h5>
        </div>  
    </div>

    <div class="clearfix">
        <a disabled="disabled" class="btn btn-primary pull-right" data-ng-disabled="newForm.$invalid" data-ng-click="SendParams()">Continua</a>
    </div>
</form>

你知道导致这个问题的原因吗？我该如何解决？

AngularJS Custom指令用于输入，验证问题

0 个答案: