Angulajs填充来自$ http get的变量

时间:2016-01-08 08:15:18

标签: angularjs http angularjs-directive

我的指令是从数组(用户名)验证异步用户名。如何使用查询我的数据库而不是静态数组的http调用?

app.directive('username', function($q, $timeout) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
  var usernames = ['Jim', 'John', 'Jill', 'Jackie'];

  ctrl.$asyncValidators.username = function(modelValue, viewValue) {

    if (ctrl.$isEmpty(modelValue)) {
      // consider empty model valid
      return $q.when();
    }

    var def = $q.defer();

    $timeout(function() {
      // Mock a delayed response
      if (usernames.indexOf(modelValue) === -1) {
        // The username is available
        def.resolve();
      } else {
        def.reject();
      }

    }, 2000);

    return def.promise;
  };
}
};
});

提前致谢!

1 个答案:

答案 0 :(得分:0)

您可以将$http注入您的指令函数,在您的链接中进行AJAX调用,并根据您的AJAX调用响应来解决或拒绝您的承诺。

app.directive('username', function($q, $timeout, $http) {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {


        ctrl.$asyncValidators.username = function(modelValue, viewValue) {

          if (ctrl.$isEmpty(modelValue)) {
           // consider empty model valid
          return $q.when();
          }

          var def = $q.defer();

          $http.get('your-rest-api/users/'+modelValue).then(function() {
           // Found the user
           def.reject();
         }, function() {
            // User not found
           def.resolve();
         });


       return def.promise;
      };
   } // end of link fn
  }; // end of DDO
});