AngularJS 隔离范围 ng-模型验证

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
        };
    });
};

在DOMHTML

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

我可以在 DOM 元素中使用 ng-model 吗？因为我也想在没有自定义隔离指令的情况下使用 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-模型验证

AngularJS isolate scope ng-model validation

javascript

angularjs

angularjs-ng-model

isolate-scope