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>

原來我用NG-變化，但如果它是無效的它不火，所以我想改變NG-改變功能成指令，但我不知道該怎麼做。

我想下面

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

功能更改爲類似

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

任何人都可以給我一些建議嗎？非常感謝！

來源

2016-08-24 Natsuki_Kato

你可以利用指令控制器功能，使$ HTTP請求 –

可能是我不力正確地得到您的業務規則，但你真的需要擔心的重複檢查，如果鍵入電子郵件地址是無效的？ – Developer

@Developer感謝您的評論！其實我想修復時從有效到無效的電子郵件的變化，也不會觸發NG變函數因此該消息不會改變。如果電子郵件格式無效以解決問題，我最終會隱藏郵件。 –

我會用$看，如果你不能使用NG-變化（在你的控制器或分離的指令，但我不會走那條路）。像這樣的事情在你的控制器：

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

來源

2016-08-24 07:13:34 Luxor001

雖然解決方案僅當電子郵件的輸入是有效的，謝謝你給我一個替代方案來解決這個問題。 –

我假設你想創建，檢查確認指令，如果郵件是可用的，所以：

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

我已經寫過記憶，所以可能會有一些錯誤，但這個想法應該沒問題。

來源

2016-08-24 07:38:57

Angularjs，創造客戶指令與$ http.post

回答

相關問題