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模型招標和驗證崩潰

回答

相關問題