DOMコントローラーから更新されないDOM要素

Question

ng-blurで関数を実行しようとしていますが、そのフィールドに定義されたregular expressionに対してユーザー入力を検証します。

私が達成したいのは、正規表現がユーザーの入力と一致しない場合、その特定のテキストフィールドの入力ボックスの枠線を赤にする必要があります。

私はgetElementById() and modify DOMを使用する簡単なjavascriptのケースだと理解しています。私は通常のコントローラからDOMを更新することができません。

ng-messagesなどを使用することはできません。コントローラからの正規表現に失敗したためにエラーが発生するため、ハードコードされたng-messagesは書き込めません。

今後の進め方に関する洞察は非常に役に立ちます。

コード： propオブジェクト：これはsalesforce serverから取得されます。私はコードを説明するために必要なもののためにジストを提供しています。実際のレスポンスは、すべての参照、参照フィールド、サーバから引き出された選択肢オプションなどを使用して実行時にフォームを生成するのに便利なように、多くの前処理が必要です。

[ 
{ label  : Application Name 
    cid  : uniqueId 
    typeApex : CURRENCY 
    fieldPath : application_Name__c 
    type  : NUMBER 
    value  : '' 
    dbRequired : true 
    isRequired : false 
}, 
{...similar array of JSON object ...}, 
{} 
] 

view.html

<div ng-if="prop.type != 'picklist' && prop.type != 'reference'"> 
    <label for="{{prop.label}}">{{prop.label}}</label> 
    <input type="{{prop.type}}" id="inputFields{!cid}" ng-blur='fieldValidation(prop.fieldPath, prop.typeApex, inputFields{!cid}, $event)' ng-model-options="{updateOn: 'blur'}" 
      class="form-control" name="{{prop.fieldPath}}" ng-model="fieldPathValue[prop.fieldPath]" ng-init="fieldPathValue[prop.fieldPath]=getDefaultValue(prop.type,prop.value)" 
      ng-required="isRequired({{prop.dbRequired}}, {{prop.isRequired}})"/> 
</div> 

コントローラー：ここから

私はエラーまったくの

$scope.fieldValidation = function(fieldPath, type, id, $event) { 

    // Hardcoded regular expression for testing, this will be read from server object 
    var myMap = new Map(); 
    myMap.set("Term__c","^[0-9]+$"); 
    myMap.set("Loan_Amount__c","[0-9]+(\.[0-9][0-9]?)?"); 

    var value = $event.target.value; //$event object contains element Id, user input value 
    var reg = new RegExp(myMap.get(fieldPath)); 

    if(!reg.test(value)) { 
     //add error message class to selected field 
     //display error message on top of field 

     $timeout(function(){ 
     // added $scope.apply recently, not a good practice I understand 
     $scope.$apply(function() { 
      $scope.spanId = document.getElementById($event.srcElement.id); 
      $scope.spanId.style.borderColor='#ff0000'; 
      $scope.spanId.style.border='solid'; 
      }); 
     }, 1000); 
     } 

Answer 1

まず上の入力テキストボックスのDOM要素を更新しようとしています内部的に$ timeoutの中に$ applyを使用する必要があります。ベストプラクティスでは、Dom操作はコントローラー、サービス、または他の場所ではなくディレクティブ内に存在するべきです。

.directive('fieldvalidate', [ 
    function() { 
    return { 
     restrict: 'A', 
     link: function($scope, $element, $attributes) { 
     $element[0].onblur = function() { 
      //check against regex 
      if(){//if failed 
      $element[0].style.borderColor='red'; 
      $element[0].insertAdjacentHTML('afterend', '<div>your message</div>'); 
      } 
     } 
     } 
    }; 
    } 
]);