ng-show 没有从指令中捕获 $invalid 的更新值，为什么？

Question

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

该字段应包含大于 1.00 的值，但当我加载页面时默认值为 0.00，但如果您 touch/focus 模糊该字段时，应该会出现错误。

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

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

对于手动运行ning 摘要循环，您可以在范围内使用 $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;
  })
});

ng-show 没有从指令中捕获 $invalid 的更新值，为什么？

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

javascript

validation

angularjs

angularjs-directive

angularjs-digest