AngularJS 模型绑定和验证崩溃答案

【问题标题】：AngularJS model biding and validation crashAngularJS 模型绑定和验证崩溃
【发布时间】：2016-01-22 09:59:47
【问题描述】：

我有一个指令，它基本上是一个自定义输入字段

JS（InputFieldDirective.js）：

function InputFieldDirective() {
    var directive = {
        restrict: 'EA',
        replace: true,
        templateUrl: '/Views/Directives/InputField.html',
        scope: {
            type: '@inputType',
            pattern: '@inputPattern',
            id: '@inputId',
            class: '@inputClass',
            mandatory: '@inputMandatory',
            autocomplete: '@inputAutocomplete',
            bindedModel: '=inputModel',
            placeholder: '@inputPlaceholder',
            icon: '@inputIcon',
            errorMessage: '@errorMessage'
        }
    }

    return directive;
};

HTML (InputField.html)：

<div class="input-field-wrapper">
<i class="placeholder-icon {{ icon }}" ng-if="icon !== ''"></i>
<input type="{{ type }}" pattern="{{ pattern }}" id="{{ id }}" name="{{ id }}" class="{{ class }}" ng-required="mandatory == 'yes'" autocomplete="{{ autocomplete }}" ng-model="bindedModel" ng-class="{'empty': !bindedModel}">
<label class="placeholder-label">{{ placeholder }}</label>
<span class="focus-animation"></span>

所以当我尝试将它插入到这样的随机模板文件中时：

<input-field input-type="text" input-pattern="" input-id="loginEmail" input-class="form-control" input-required="true" input-autocomplete="off" input-model="login.loginData.username" input-placeholder="Email" input-icon="em-email" error-message="Invalid email address!"></input-field>

然后它就像一个魅力。将数据模型（在模板的控制器中处理和使用）连接到字段。例如：如果我记录模型“loginData”（包含“用户名”和“密码”模型），当我在输入中输入内容时，我会得到正确的结果。例如：

Input values:       username: myUsername
                    password: myPassword
loginData model:    {username: 'myUsername', password: 'myPassword'}

但是，如果我将输入类型更改为“电子邮件”或“网址”（使用其他一些值进行测试，“文本”、“密码”、“日期”、“搜索”等效果很好），那么我开始输入输入中的某些内容，loginData 的“用户名”变量神奇地消失了。例如：

Input values:       username: myUsername
                    password: myPassword
loginData model:    {password: 'myPassword'}

我做错了什么？将模型连接到指令的元素有什么问题吗？但如果是，为什么它只出现在输入类型“email”和“url”（可能与其他一些我没有测试过的）并且与其他人一起工作？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您的代码一切正常。输入类型 'email' 和 'url' 只有一个简单的检查内容是否有效。如果不是，模型仍然是空的。尝试输入有效的电子邮件地址或 url。它应该可以工作。

这是我的测试：

angular.module('app', [])
.directive('inputfield', InputFieldDirective);

function InputFieldDirective() {
    var directive = {
        restrict: 'EA',
        replace: true,
        template: '<div><input type="{{ type }}" pattern="{{ pattern }}" id="{{ id }}" name="{{ id }}" autocomplete="{{ autocomplete }}" ng-model="bindedModel" ><label>{{ placeholder }}</label><span class="focus-animation"></span></div>',
        scope: {
            type: '@inputType',
            pattern: '@inputPattern',
            id: '@inputId',
            class: '@inputClass',
            mandatory: '@inputMandatory',
            autocomplete: '@inputAutocomplete',
            bindedModel: '=inputModel',
            placeholder: '@inputPlaceholder',
            icon: '@inputIcon',
            errorMessage: '@errorMessage'
        }
    }

    return directive;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <inputfield input-type="url" input-pattern="" input-id="loginEmail" input-class="form-control" input-required="true" input-autocomplete="off" input-model="login.loginData.url" input-placeholder="URL" input-icon="em-email" error-message="Invalid email address!"></inputfield>{{login.loginData.url}}
  <inputfield input-type="email" input-pattern="" input-id="loginEmail" input-class="form-control" input-required="true" input-autocomplete="off" input-model="login.loginData.email" input-placeholder="Email" input-icon="em-email" error-message="Invalid email address!"></inputfield>{{login.loginData.email}}
</div>

【讨论】：