ng节目没有't从指令中捕获更新的$invalid值，原因是什么

ng-show doesn't catch the updated value of $invalid from the directive, why?

本文关键字：更新 invalid 是什么 节目 指令 ng      更新时间：2023-09-26

问题是：当我聚焦于一个字段并模糊它时，它会向我显示错误消息和输入字段周围的边框颜色，然后我再次聚焦它，写0并模糊它，它仍然向我显示输入的红色边框，但不显示错误消息。

该字段应包含一个大于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;
                    });

        }
    }
});

任何在上下文之外更新angular scope/binding的东西，angular都不知道。为了更新绑定，我们需要手动运行摘要循环，这最终会告诉angular绑定已经更改，并根据它更新绑定。

对于手动运行摘要循环，您可以在范围内使用$apply()/$timeout/$applyAsync方法来查看效果。

也可以使用具有该元素的el来代替$(this)。

代码

.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;
  })
});
相关文章：