Question

我想使用AngularJS提供的内置表单验证来定制组件指令。但它不起作用。验证失败时，modelValue和viewValue设置为''空字符串。我丢失了所有的打字......

的script.js

angular.module("myModule", [])
     .directive("customIsolateDirective", function () {
        return {
            restrict : "A",
            scope : {
                ngModel : "="
            },
            // Replace original template
            template : '<div ng-form="form"><input ng-model="ngModel" ng-maxlength="10" ng-class="{ error : form.$invalid }"></div>',
            replace : true
        };
    });
};

在DOM HTML中

<input type"text" ng-model="model" custom-isolate-directive>

我可以在DOM元素中使用ng-model吗？因为我也想使用没有自定义isolate指令的ng-model指令。

目标是我想要每个表单组件指令具有它自己的隔离范围并验证它自己的范围独立父范围。如果我将<input ng-model="model">元素的ng-model指令更改为<input model="model">，它可以正常工作。我的问题是，我可以使用 ng-model 属性来双向绑定具有相同名称的子隔离范围的 ng-model 吗？因为我想要动态地改变我的组件指令。

以下是我在Plunker

中创建的问题

Answer 1

您获得此奇怪行为的原因是，当超出最大长度时，绑定输入的模型属性将变为未定义。您需要做的就是在输入上将allowInvalid模型选项标志设置为true。

<div ng-form="form">
<p>Please try to type something in the input box. <em>(max-length: 11)</em></p>
<input ng-model="ngModel" ng-maxlength="11" ng-model-options="{allowInvalid: true}" ng-class="{ error : form.$invalid }">
<p style="margin-top : 0;">ngModel length : {{ ngModel.length }}</p>
<pre>{{ form | json }}</pre>

Here is an updated plunk

AngularJS隔离范围ng模型验证

1 个答案: