Question

编辑：以下是任何人看的工作示例。我在promoCode上有一个带有2个输入值的指令的实时验证。

您好，我遇到了问题。我有2个输入，一个电子邮件和一个促销代码和一个指令，检查促销代码和相关的电子邮件是否有效。但是，我仍然坚持如何传递电子邮件值。我已经有一半了，我可以使用硬编码的电子邮件值检查促销代码。我是否必须重写我是如何进行此项检查的，或者我是否遗漏了一些明显的电子邮件值？这甚至是一种正确的方法吗？我是Angular的新手。

澄清：当用户开始输入促销代码时，就会发生API调用。基本上我如何获取电子邮件值并将其发送到工厂？我已经查看并尝试了范围。$ watch并且能够看到每个输入的值发生变化但无法存储。

我看过这里How to get evaluated attributes inside a custom directive并尝试了这种方法，但是得到了＃34;未定义＆＃34;用于电子邮件和promocode值。

HTML

<input type="text" class="form-control" name="email" id="email" placeholder="Enter Email" maxlength="254" ng-model="registrationData.email" required >
<input type="text" class="form-control" name="promoCode" id="promo-code" placeholder="Parking Program Code" ng-model="registrationData.promo_code" ng-model-options="{ debounce: 500 }" promo-email='registrationData.email' promo-validation>
<div ng-show="validate.promoCode.$touched || validate.promoCode.$dirty">
  <div ng-messages="validate.promoCode.$error" style="color:maroon" role="alert">
  <div ng-message="promoCode">Code invalid</div>
</div>
<div ng-messages="validate.promoCode.$pending">
  <div ng-message="promoCode">Checking promo test...</div>
</div>

指令

.directive('promoValidation',['isPromoValid', function(isPromoValid)
{ 
  return {
  restrict: 'A',
  require: 'ngModel',
  scope: 
  { 
      promoEmail:'=' 
  },
  link: function(scope, element, attrs, ngModel) {
  element.bind('focus', function() {
    ngModel.$asyncValidators.promoCode = function(promoCode) {
      return isPromoValid(scope.promoEmail, promoCode);
   })
   }
  }}
]);

厂

.factory('isPromoValid',['$q', '$http', 'SERVICE_BASE', function($q, $http, SERVICE_BASE) {
var apiUrl = SERVICE_BASE + '/users/ValidatePromoCode';
return function(email, promoCode) {
var deferred = $q.defer();
if(!promoCode)
{
  deferred.resolve(); //promoCode is optional so I have this check if the user adds a promoCode then deletes it. It removes the error message
}
else {
  $http.get(apiUrl , {params: { promo_code: promoCode, email: email }}).then(function validPromo(data){
  var isPromoValid = data.data.data.valid;
  if(isPromoValid) {
    deferred.resolve();
  }
  else {
    deferred.reject();
  }
});
   }
    return deferred.promise;
  };
}]);

Answer 1

您需要像as-

一样更改指令

.directive('promoValidation',['isPromoValid', function(isPromoValid
{ 
  return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
        promoEmail:'='
},
  link: function(scope, element, attrs, ngModel) {
  element.bind('focus', function() {
    //console.log(ngModel.email); 
    //console.log(scope.promoEmail); // pass this email to your validator factory
    ngModel.$asyncValidators.promoCode = isPromoValid;
   })
   }
  }}
]);

在html上，仅将此指令用于{-1}}输入字段，如as-

promocode

您可以根据需要改进此代码。

如何在同一指令中获取多个输入值？

1 个答案: