1

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

脚本.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 吗？因为我也想使用没有自定义隔离指令的 ng-model 指令。

目标是我希望每个表单组件指令都有它自己的隔离范围并验证它自己的范围独立父范围。如果我将<input ng-model="model">元素的 ng-model 指令更改为<input model="model">它可以正常工作。我的问题是我可以使用ng-model属性以两种方式绑定子隔离范围的ng-model同名吗？因为也许我想动态更改我的组件指令。

这是我在Plunker中创建的问题

4

1 回答 1

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>

这是一个更新的plunk

于 2016-01-23T07:52:53.520 回答