Angularjs、$ http.postで顧客指令を作成

Question

私はangularjsを新しくしました。現在、私は電子メールの入力フォームを持っています。したがって、私は指示にNG-変更機能を変更したいが、私はそれを行う方法が分からない、

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

は、もともと私はNG-変更を使用しますが、それが無効である場合には発生しません。私は

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

のようなものに

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

以下の機能を変更したい

は、誰も私にいくつかの提案を与えることができますか？どうもありがとう！

Answer 1

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; 
      }); 
     }); 
     }   
    }; 
}); 

Answer 2

を私はそう、あなたは電子メールが利用可能であるかどうかを確認する検証ディレクティブを作成したいと仮定します

<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 
        } 
       }); 
      }); 
      }; 
     } 
     }; 

メモリにはいくつかの間違いがあるかもしれませんが、そのアイデアはうまくいくはずです。