Question

我将以下标记与某种asp.net剃须刀混合使用：

<div class="account-form__field-container" ng-show="postcodeRequired()" ng-cloak>
    @Html.LabelFor(x => x.Postcode)
    @Html.TextBoxFor(x => x.Postcode, new { @class = "account-form__field", placeholder = "Postcode here...", ng_required = "postcodeRequired()",ng_validpostcode="", ng_model = "postcode", ng_init = "postcode = '" + Model.Postcode + "'" })
    @Html.ValidationMessageFor(x => x.Postcode, null, new { @class = "account-form__error-message" })
    <span class="account-form__error-message" ng-show="registrationForm.$submitted && registrationForm.Postcode.$error.required" ng-cloak>
        Please enter your postcode
    </span>
    <span class="account-form__error-message" ng-show="registrationForm.$submitted && !validPostCode()" ng-cloak>
        Please enter valid postcode
    </span>
</div>

我有一个下拉菜单，它将显示隐藏邮政编码字段，因此，如果选择了uk，则将显示邮政编码字段。该字段是必填字段，但此外，我正在通过网络服务检查是否是有效的邮政编码。处理表单提交的角度控制器如下所示：

        $scope.submitForm = function () {

        $scope.registrationForm.$submitted = true;

        if ($scope.enableSubmit()) {
            registrationForm.submit();
        }
    };

    $scope.postcodeRequired = function () {
        return $scope.country === 'United Kingdom';
    };

    $scope.validPostCode = function () {
        if ($scope.postcodeRequired()) {
            if ($scope.postcode !== undefined && $scope.postcode.length > 5) {
                postcodeService.ValidatePostCode($scope.postcode).success(function (response) {
                    return response;
                });

            } else {
                return false;
            }
        }
        return true;
    };

     $scope.enableSubmit = function () {
        return $scope.registrationForm.$valid
            && $scope.passwordsMatch()
            && $scope.acceptTerms
            && $scope.validPostCode();
    };

postCodeService只是执行http get来验证返回true或false的邮政编码。我所提交的问题是验证邮政编码，但随后进入循环并给出以下错误：

angular.min.js:34 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.0/$rootScope/infdig?p0=10&p1=%5B%5D
at angular.min.js:34
at m.$digest (angular.min.js:563)
at m.$apply (angular.min.js:571)
at l (angular.min.js:373)
at O (angular.min.js:388)
at XMLHttpRequest.N.onload (angular.min.js:392)

在执行ng-repeat时，我曾见过其他人遇到此问题，但正如您所看到的，我没有这样做。

有什么想法吗？

Answer 1

没有一个笨拙的人来进行测试并验证其难以准确地说明导致无限摘要循环的原因。但是，我相信这可能是由于对您的$scope.validPostCode函数的调用次数过多（未正确返回其有效性）引起的。基本上，建议的更改是仅在更改邮政编码（在字段上由ng-change触发）后才调用validate函数。该函数的结果将$scope.validPostCode变量设置为true或false，然后检查其有效性；

HTML （将ng-change添加到输入中）

@Html.TextBoxFor(x => x.Postcode, new { <!-- other attributes -->, ng_change = "validatePostCode()" })

JavaScript

$scope.postcodeRequired = function () {
    return $scope.country === 'United Kingdom';
};

// by default its not valid
$scope.validPostCode = false;

// our Validition check
$scope.validatePostCode = function () {
    if ($scope.postcodeRequired()) {
        if ($scope.postcode !== undefined && $scope.postcode.length > 5) {
            postcodeService.ValidatePostCode($scope.postcode).success(function (response) {
                $scope.validPostCode = response;
            });
        } else {
            $scope.validPostCode = false;
        }
    } else {
        $scope.validPostCode = true;
    }
};

// call our function to properly set the initial validity state.
$scope.validatePostCode();

$scope.enableSubmit = function () {
    return $scope.registrationForm.$valid
        && $scope.passwordsMatch()
        && $scope.acceptTerms
        && $scope.validPostCode;
};

$ rootScope：angularjs 1.4.0中的infdig错误

1 个答案: