指令與它周圍的驗證包裝

我想創建一個指令，將具有完整的引導表單字段佈局以及表單驗證消息等，同時控制從javascript模型定義的HTML，我認爲這將是簡單的，但doesn現在看起來就像那樣。指令與它周圍的驗證包裝

目前我有下面模板寫爲每一個字段：

'<div ng-form="myform">' + 
     '<div class="control-group" class="{{options.class}}" >' + 
     '<div class="control-label">{{options.label}} {{options.required ? "*" : ""}} </div>' + 
     '<div class="controls">'; 

    html += '<input type="number" name="myfield" placeholder="{{options.placeholder}}" ng-required="options.required" ' + 
     'ng-pattern="{{options.pattern}}" ng-minlength="{{options.minlength}}" ng-maxlength="{{options.maxlength}}" ' + 
     'ng-readonly="options.readonly" autofocus="options.autofocus" ng-change="ngChange" autocomplete="off" data-ng-model="ngModel"/>' 

    html += '<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' + 
       '<div data-ng-show="myform.myfield.$error.required ">{{options.label}} is required!!!</div>' + 
       '<div data-ng-show="myform.myfield.$error.pattern">{{options.patternMessage}}</div>' + 
       '<div data-ng-show="myform.myfield.$error.minlength">{{options.label}} should have atleast {{options.minlength}} character/s.</div>' + 
       '<div data-ng-show="myform.myfield.$error.maxlength">{{options.label}} can have maximum {{options.maxlength}} character/s.</div>' + 
       '<div data-ng-show="myform.myfield.$error.min">{{options.label}} cannot have value less than {{options.min}}</div>' + 
       '<div data-ng-show="myform.myfield.$error.max">{{options.label}} cannot have value greater than {{options.max}}</div>' + 
      '</div>';

和我有在控制器相應的對象。

$scope.fields = { 
      name : {lable: "Name", required: true, min-length=5} 
    }

所以通過這個對象的指令，然後獲得按照現場細節應該工作產生的模板，但沒能實現最終的結果。我嘗試了各種方法。

有獨立的指令爲模板和輸入的標籤

一個。有一個指令'E'會生成輸入標籤，但是ng-change和ng-model由於某種原因不同步，請檢查以下內容：PLUNKER

b。有一個指令'A'將ng-minlength，ng-maxlength attrs添加到輸入標籤，驗證不會被觸發。檢查這PLUNKER
在一個指令中有一切，但那麼我怎麼通過ng-change，ng-blur，typeahead從我的指令輸入標記，它不是理想的繼續獲取範圍內的每一件事，並繼續添加它輸入。

有人可以請指導我怎樣才能實現最終的結果.. 選項2工作了大多數情況下，卻開始給問題的情況增加，這樣一來我想不惜一切代價避免。因此，我又回到了第一次執行，即2指令的方式，一個指令產生輸入標籤和另一個佈局和驗證

但當時如果我有輸入標籤指令爲「E」，那麼所有的NG-變化&納克-model將需要追加$ parent，因爲我通過範圍獲取選項，因此，然後再次指令的最終用戶將記得爲每個與範圍的交互傳遞$ parent，這在透明度級別上是失敗的。所以與'A'指示一起似乎是最好的方法。

有人可以幫我解決問題1.b這就是爲什麼驗證不起作用，如果我有一個不同的指令ng-form比輸入標籤指令（我知道驗證是在編譯階段而不是鏈接階段）

或者如果有人可以指點我類似的東西，試圖實現我正在嘗試的東西。注：我已經看到了形式上的角度，但它也有沒有ng輸入等改變的問題。還有其他類似的解決方案嗎？

來源

2014-03-12 harishr

Plnker似乎並不奏效:(。這只是我嗎？ – Wawy

強盜正在工作..剛剛確認 – harishr

你需要編譯元素

$compile(element)(scope)

目前你不是編譯的，美在DOM所做的更改角不會知道

來源

2014-04-06 06:45:17

指令與它周圍的驗證包裝

回答

相關問題