1

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


        }
    }
});
4

1 回答 1

1

任何在其上下文之外更新角度范围/绑定的东西，然后角度都不知道。为了更新该绑定，我们需要手动运行摘要循环，这最终会告诉 Angular 绑定已更改，并据此更新绑定。

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

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

代码

.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;
  })
});
于 2015-10-30T19:56:04.193 回答