没有从角度控制器更新的DOM元素 [英] DOM elements not getting updated from angular controller

问题描述

我试图在 ng-blur 上运行一个函数，这将根据正则表达式验证用户输入为该字段定义。

I'm trying to run a function on ng-blur which will validate the user input against regular expression defined for that field.

我想要实现的是如果正则表达式与用户输入不匹配，我想将该特定文本字段输入框边框转为红色。

What I want to achieve is if the regular expression doesn't matches the user input, I want to turn that specific text field input box border to turn red.

我明白这是一个简单的JavaScript案例，我们使用 getElementById（）并修改DOM 。我不能从常规控制器更新DOM。

I understand this is a trivial javascript case where we use getElementById() and modify DOM. I'm not able to update the DOM from regular controller.

我不能使用ng消息等，因为我想根据哪个正则表达式失败从控制器发出错误，所以我不能写硬编码的 ng消息。

I cannot use ng-messages,etc as I want to throw error from controller based on which regular expression failed, so I can't write hardcoded ng-messages.

任何关于如何进一步进行的洞察将是非常有用的。

Any insight on how to proceed further will be very helpful.

代码：
prop对象：这将从salesforce服务器检索。我提供了需要解释代码的jist。实际响应需要大量预处理，使其在运行时生成表单非常有用，所有参考，查找字段，从服务器提取的选择列表选项等。

Code: prop object : This will be retrieved from salesforce server. I'm providing the jist for what is needed to explain the code. Actual response requires lot of pre-processing to make it useful for generating form at runtime with all reference,lookups fields,picklist options pulled from server,etc.

[ 
 { 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

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>

控制器：

从这里我'尝试更新输入文本框的DOM元素错误

From here I'm trying to update DOM elements of input text box on error

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

推荐答案

首先不需要在$ timeout内使用$ apply，因为它在内部使用它。最佳实践，Dom Manipulations不应存在于控制器，服务或其他任何地方，而是在指令中。

First of all no need to use $apply inside $timeout, as it internally use it. Best practice, Dom Manipulations should not exist in controllers, services or anywhere else but in directives.

.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>');
          }
        }
      }
    };
  }
]);

这篇关于没有从角度控制器更新的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！