Question

问题是：当我专注于一个模糊它的场时，它会显示输入字段周围的错误信息和边框颜色，然后我再次聚焦它并写入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;
                    });


        }
    }
});

Answer 1

任何更新角度范围/绑定超出其上下文的内容，然后angular不知道。为了更新该绑定，我们需要手动运行摘要周期，这最终会告诉角度绑定已经更改并根据它更新绑定。

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

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

1 个答案: