AngularJS隔離範圍模型驗證

我想使用AngularJS爲自定義組件指令提供的內置表單驗證。但它不起作用。當驗證失敗時，modelValue和viewValue設置爲''空字符串。我失去了我所有打字...AngularJS隔離範圍模型驗證

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

在DOM HTML

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

我可以用NG-模型中的DOM元素？因爲我想使用ng-model指令而沒有自定義隔離指令。

目標是我想每個表單組件指令都有自己的獨立範圍並驗證它自己的範圍獨立的父範圍。如果我將<input ng-model="model">元素的ng-model指令更改爲<input model="model">，它可以正常工作。我的問題是我可以用ng-model屬性來雙向綁定子隔離範圍的ng-model同名嗎？因爲也許我想動態地改變我的組件指令。

這裏是我在Plunker

來源

2016-01-23 jeefo

你能解釋一下精心？不明白什麼是實際問題。 – Thangadurai

嗨，去我的Plunker，在輸入框中輸入一些東西 – jeefo

你得到這種奇怪的行爲的原因是因爲超過最大長度時，您所輸入綁定到模型屬性變得不確定造成的問題。所有你需要做的解決這個問題是在輸入上設置allowInvalid模型選項標誌爲真。

<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

來源

2016-01-23 07:52:53 10BitDev

我不知道'ng-model-options'。我學**了getterSetter **選項並修復了問題。謝謝:) – jeefo

謝謝你接受我的第一個答案。我很高興你能找到另一種方式。 – 10BitDev

AngularJS隔離範圍模型驗證

回答

相關問題