Угловая функция срабатывает перед обновлением модели: проверка кода на Zipcode

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

Вы бы лучше использовать угловую форму проверки и записи пользовательских валидаторов.

Это 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'.