javascript - Angular 函数在模型更新之前触发 : Zipcode checker

Question

看起来 checkZip 函数是在用户的 zip 绑定(bind)到参数之前触发的。有没有更好的方法使用 Angular 工具来完成此任务？我想在用户输入正确的邮政编码后立即启动用户流程的下一步。

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

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

这里是a great article涵盖您需要了解的所有内容。

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

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'。