javascript - Angular 函数在模型更新之前触发：邮政编码检查器

Question

似乎 checkZip 函数在用户的 zip 绑定到参数之前触发。有没有更好的方法来使用角度工具来实现这一点？我想在用户输入正确的邮政编码后立即开始用户流程的下一步。

HTML

<input type="text" placeholder="Zipcode" ng-model="zip" ng-change="checkZip('{{zip}}')">

Javascript

// Zipcode Key
$scope.zipKey = [94203, 94204, 94205];

// Zipcode checker
$scope.checkZip = function(zip) {
    var key = $scope.zipKey;
    if (zip.length == 5) {  
        for(var i = 0;i<key.length;i++) {
            if (key[i] == zip) {
                // Initiate State Change
                $scope.successAlert = 'We serve in your area!';
            }
        }
    }   
}

Answer 1

您最好使用角度表单验证并编写自定义验证器。

这是一篇很棒的文章，涵盖了您需要了解的所有内容。

根据您的需要，您可以编写如下指令：

app.directive('ensureZipcode', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelController) {
      scope.$watch(attrs.ngModel, function() {
        valid = true // or false, implement your logic here
        modelController.$setValidity('zipcode', valid);
      });
    }
  }
});

这里的小提示：modelController 被设置为link函数的第四个参数，因为我们指定了require: 'ngModel'.