ng-show не улавливает обновленное значение $ invalid из директивы, почему?

Question

Проблема заключается в том, что когда я фокусируюсь на поле, размываю его, он показывает мне сообщение об ошибке msg и границе цвета вокруг поля ввода, затем я фокусирую его снова, и я пишу 0 и размываю его, он все еще показывает мне входной красный но не ошибка msg.

Поле должно содержать значение, превышающее 1,00, но при загрузке страницы значение по умолчанию равно 0,00, но если вы коснетесь или фокусируете поле при размытии, ошибка должна возникнуть.

HTML:

<div class="col-xs-12 a24sm-5"> 
         <input class="form-control" gh-amount-field name="singleLimit" id="singleLimit" ng-model="crCtrl.form.limits.single.val" ng-blur="crCtrl.form.limits.single.errFn()" tabindex="7" /> 
         <span class="visible-xs msg-container msg-single"> 
           <span class="gh-error" ng-show="cardRules.singleLimit.$invalid">{{crCtrl.form.requiredMsg}}</span> 
         </span> 
        </div> 

директива это:

directive("ghAmountField", function(){ 
    return{ 
     require: "^form", 
     link: function(s, el, attrs, formCtrl){ 
        var initialAmount; 

        el.on("blur", function(){ 
         var min = attrs.hasOwnProperty("amountMin") ? parseFloat(attrs.amountMin) : false; 
         var max = attrs.hasOwnProperty("amountMax") ? parseFloat(attrs.amountMax) : false; 
         var req = attrs.hasOwnProperty("required"); 

         var amount = $(this).val().length > 0 ? $(this).val().replace(/[^\d\.]/g, "") : initialAmount.replace(/[^\d\.]/g, ""); 

         if(amount.length>0) { 
          amount = parseFloat(amount).toFixed(2); 
          $(this).val("£"+amount); 
         } 
         else{ 
          $(this).val("£"+initialAmount); 
          amount = initialAmount; 
         } 

         formCtrl[attrs.name].$invalid = false; 

         if(!req && amount<1){//after first changing you cannot put zero but at least 1.00 
          $(this).val("£"+initialAmount); 
          amount = initialAmount; 
          formCtrl[attrs.name].$invalid = initialAmount<1 ? true : false; 
         } 

         console.log(amount, initialAmount); 
         if (!formCtrl[attrs.name].$invalid && (typeof min == 'number' && amount < min || typeof max == 'number' && amount > max)) { 
           formCtrl[attrs.name].$invalid = true; 
         } 

         console.log(amount, initialAmount); 
         if (formCtrl[attrs.name].$invalid) { 
          //$(el).removeClass(formCtrl[attrs.name].$invalid ? "ng-valid" : "ng-invalid").addClass(formCtrl[attrs.name].$invalid ? "ng-valid" : "ng-invalid"); 
          $(this).removeClass("ng-valid").addClass("ng-invalid"); 
         } 
         else { 
          $(this).removeClass("ng-invalid").addClass("ng-valid"); 
         } 

        }) 
        .on("focus", function(){ 
          initialAmount = $(this).val().replace(/[^\d\.]/g, ""); 
          $(this).val(""); 
        }) 
        .on("keypress", function(){ 
          $(this).removeClass("ng-invalid").addClass("ng-valid"); 
          formCtrl[attrs.name].$invalid = false; 
        }); 


     } 
    } 
}); 

Answer 1

Любая вещь, которая обновляет угловой объем/связывании из контекста, то угловое не знает. Для обновления этой привязки нам нужно запустить цикл дайджеста вручную, что в конечном счете говорит об угловом, что привязка была изменена и в соответствии с ней привязки обновления.

Для ручного цикла дайджеста вы можете использовать метод $apply()/$timeout/$applyAsync, чтобы увидеть эффекты.

Также вместо $(this) вы можете использовать el, который имеет этот элемент.

Код

.on("focus", function(){ 
    $timeout(function(){ 
    initialAmount = $(this).val().replace(/[^\d\.]/g, ""); 
    el.val(""); 
    }) 
}) 
.on("keypress", function(){ 
    $timeout(function(){ 
    el.removeClass("ng-invalid").addClass("ng-valid"); 
    formCtrl[attrs.name].$invalid = false; 
    }) 
});