使用Angular验证用户名已存在的正确姿势

最近在使用angular框架做一款进销存的系统，其中用到了用户名唯一性的校验。折腾了2天也没有搞明白，辗转反侧难以入睡呀。后经大师指点，终于柳暗花明。废话不多说。我先粘贴部分代码供大家把玩一下（由于是公司项目，不便把整个篇代码贴出，请大家谅解）。

register.html

<div class="form-group">
          <label class="col-sm-2 control-label">手机号</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" ensure-unique placeholder="手机号" ng-model="mobile"  
            ng-pattern="/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/" required>

            <span style="color:#f05050" ng-show='form.mobile.$error.unique'>手机号已存在</span>
          </div>
        </div>

不是说用户名吗，怎么是手机号呀？不好意思，因为业务需要我们把手机号作为唯一标识。

js代码

angular.module('app')
  .directive('ensureUnique', function($http) {
    return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
          scope.$watch(attrs.ngModel, function (value) {
              console.log(value);
              if (!value) return;
              $http({
                  method: 'GET',
                  url: scope.app.host+"/user/verify/username/"+value,
              }).success(function (data) {
                  if(data.status === 80200) {
                    // ctrl.$setValidity('unique', data);
                    console.log('unique=true');
                    ctrl.$setValidity('unique', true);
                  } else {
                    console.log('unique=false');
                    ctrl.$setValidity('unique', false);
                  }
                //   console.log(data);
              }).error(function (data) {
                  ctrl.$setValidity('unique', false);
              })
          })
      }
    }
  });

这样就可以实现我们需求了