具有錯誤幫助的輸入元素的指令跨度元素

我正在嘗試編寫一個指令來爲ip地址進行輸入驗證。具有錯誤幫助的輸入元素的指令跨度元素

我看到類似鍋爐板代碼在網絡上有很多例子：

<label>IP Address 1:</label> 
<input ng-model="formData.ip1" required name="ip1" type="text" 
     placeholder='xxx.xxx.xxx.xxx' 
     ng-pattern = "/^(\d{1,3}\.){3}(\d{1,3})$/"> 
<span ng-show="myForm.ip1.$error.required" style="color:red"> * </span> 
<span ng-show="myForm.ip1.$dirty && myForm.ip1.$invalid" style="color:red"> 
     This is an invalid IP.</span>

因爲這需要在幾十個地方，並且由於驗證規則和方式的錯誤指示可能會變化，我想用一個指令，像這樣的：

<label>IP Address A:</label> 
<input ng-model="formData.ipa" required my-ip-validator>

的myIpValidator指令將增加屬性（如NG模式）和額外的元素（如跨度）

我試過了幾種方法。我最近與編譯指令，如從這裏Add directives from directive in AngularJS 我開始plunker （見下更新）

我無法弄清楚如何爲NG-顯示使用獲取表單名稱。另外，由此產生的輸入元素沒有必要的類加入角度，如ng-pristine，ng-invalid等。

我該怎麼做？我願意解決這個指令的問題或完全不同的方法。

更新： 上面的笨蛋是錯誤的。它已經很老了。我正在研究一個即將發佈的更新。

更新2： 我想出了一些有效的東西。 Plunker http://plnkr.co/edit/efnfMWprVH91hQnzYkX7?p=preview 我錯過了將$ compile傳遞給函數。另一部分是從DOM檢查中獲取表單名稱。我現在要清理它並改進它。但如果有人有其他建議，我很樂意學習。這是我的第一個指示。

來源

2014-04-23 user3141592

看看我的答案在這個問題上，它可能給你一些想法。 http://stackoverflow.com/questions/22493774/controller-connect-to-directive-for-validation/22494139#22494139 – aet

aet - 感謝您的想法。但是，我希望跨度在指令輸入後進行。因爲，例如，如果有人決定跨度應該在輸入之前，我將不得不在幾十個地方進行修改。很明顯，我已經投入了很多時間，現在搜索和修改會更有效率。但是，我仍然很好奇它是否可以完成，並希望在將來能夠學到一些東西來幫助我。 – user3141592

我在回答我自己的問題。是的，這可以做到。我接近編譯方法。我只需要解決一些小問題。 Plunker http://plnkr.co/edit/efnfMWprVH91hQnzYkX7?p=preview 之前沒有工作，因爲我沒有將$ compile傳入指令。而且，我不知道如何獲取表單和輸入名稱。

這是我怎麼做的：

 var inputname = element.attr("name"), 
      foundForm = false, 
      ancestor = element.parent(); 

     while (!foundForm && ancestor) {     
      if (angular.uppercase(ancestor.prop("tagName")) == "FORM") { 
       foundForm = true; 
       var formname = ancestor.attr("name"); 
      } else { 
       ancestor = ancestor.parent(); 
      } 
     }

來源

2014-04-25 17:09:23 user3141592

具有錯誤幫助的輸入元素的指令跨度元素

回答

相關問題