Javascript Angularjs，使用$http.post创建客户指令

我是angularjs的新手，目前我有一个电子邮件输入表单

<div ng-app="emailApp" ng-controller="emailController">
  <form name="emailSubmitForm">
     <div>
         <input name="emailInput" type="email" ng-model="email" ng-watchchange="checkduplicate(email)" ng-pattern="emailFormat" required />
     </div>
     <div ng-show="isRepeated">Repeated</div>
     <div ng-show="!isRepeated">Not Repeated</div>
     <button ng-disabled="emailSubmitForm.$invalid" ng-click="createRecord()" >Submit</button>
  </form>
</div>

差不多

app.directive('ngWatchchange',function(email){
    // $http.post request
});

---

谁能给我一些建议吗？非常感谢

如果您不能使用ng change（在控制器中或在单独的指令中，但我不会这样做），我会使用$watch。 控制器中的类似内容：

$scope.$watch(function () { return $scope.email }, 
    function (changedEmail) {

       var model= {
           email: email
       };
       $http({
           method: 'POST',
           url: '/Controller/IsEmailDuplicated',
           data: model
       }).success(function (data, status, headers, config) {
           $scope.isRepeated = !data;
       });
});

这样，您将在每次更改电子邮件时发送$http（但您可以根据需要对其进行个性化设置）

如果您仍然坚持使用指令，可以尝试：

app.directive('ngWatchchange', function() {
   return {
       restrict: 'A',
       scope: {
          ngWatchchange: '='
       },
       link: function(scope, element, attr) {

          $scope.$watch(function () { return scope.ngWatchchange }, 
             function (changedEmail) {

                var model= {
                   email: email
                };
                $http({
                   method: 'POST',
                   url: '/Controller/IsEmailDuplicated',
                   data: model
                }).success(function (data, status, headers, config) {
                    $scope.isRepeated = !data;
            });
         });
       }           
   };
});

---

我假设您希望创建验证指令，检查电子邮件是否可用，因此：

<input name="emailInput" type="email" ng-model="email" email-available ng-pattern="emailFormat" required />
<div ng-show="form.emailInput.$error.emailAvailable">Repeated</div>
<div ng-show="!form.emailInput.$error.emailAvailable">Not Repeated</div>

---

我是从内存中编写的，因此可能会有一些错误，但这个想法应该是好的。

您可以使用directive controller函数生成$http请求。可能我无法正确获取您的业务规则，但如果键入的电子邮件地址无效，您真的需要检查重复项吗？@Developer谢谢您的评论！实际上，我想修复的是，当电子邮件从有效更改为无效时，它不会触发ng更改功能，因此消息不会更改。如果电子邮件格式无效，我最终会隐藏邮件以解决问题。虽然解决方案只有在电子邮件输入有效时才有效，但感谢您为我提供了解决问题的备选方案。

<input name="emailInput" type="email" ng-model="email" email-available ng-pattern="emailFormat" required />
<div ng-show="form.emailInput.$error.emailAvailable">Repeated</div>
<div ng-show="!form.emailInput.$error.emailAvailable">Not Repeated</div>

app.directive('emailAvailable', function ($q, Api) {
  return {
     require: 'ngModel',
     restrict: 'A',
     link: function (scope, element, attrs, ctrl) {
      ctrl.$asyncValidators.emailAvailable = function(modelValue, viewValue) {
        // if value is empty we leave it to 'required' validator
            if (ctrl.$isEmpty(modelValue)) {
              return $q.when();
            }

            return $q(function (resolve, reject) { //we need to return promise
              $http({
                method: 'POST',
                url: '/Controller/IsEmailDuplicated',
                data: modelValue
              }).success(function (data, status, headers, config) {
                if (data) {
                     reject(); // e-mail is duplicate so we reject from promise
                   } else {
                     resolve(); // e-mail is not duplicate so we set it as ok
                   }
                 });
            });
          };
        }
      };