AngularJS模型招标和验证崩溃

我有一个指令，它基本上是一个自定义输入区AngularJS模型招标和验证崩溃

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'（也许与其他一些我没有测试过）并且与其他人一起工作正常？

来源

2016-01-22 Gergely Reményi

一切都很好，你的代码。如果内容是有效的，输入类型的'email'和'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>

来源

2016-01-22 10:17:21

AngularJS模型招标和验证崩溃

回答

相关问题