angularjs: directiva personalizada para verificar si existe un nombre de usuario

Tengo mi formulario de registro con nombre de usuario de cuadro de texto. Lo que quiero hacer es cuando el usuario ingrese el nombre de usuario, la directiva personalizada verificará si el nombre de usuario ingresado existe en la base de datos.

directives.js

angular.module('installApp').directive('pwCheck', function ($http) { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { elem.on('blur', function (evt) { scope.$apply(function () { $http({ method: 'GET', url: '../api/v1/users', data: { username:elem.val(), dbField:attrs.ngUnique } }).success(function(data, status, headers, config) { ctrl.$setValidity('unique', data.status); }); }); }); } } }); 

Si existe, mi div class = "invalid" se mostrará en el formulario html con la etiqueta “El nombre de usuario ya existe”.

registration.html

  
Username already exists.

Pero en este momento, no están funcionando :-(, ¿estoy haciendo lo correcto? Por favor consejo o sugiérame cosas que debería hacer. Gracias de antemano.

hay un gran tutorial de yearofmoo sobre $ asyncvalidators en angular1.3. le permite mostrar fácilmente el estado pendiente cuando el campo está siendo verificado por el servidor:

aquí hay un plnkr de trabajo

 app.directive('usernameAvailable', function($timeout, $q) { return { restrict: 'AE', require: 'ngModel', link: function(scope, elm, attr, model) { model.$asyncValidators.usernameExists = function() { //here you should access the backend, to check if username exists //and return a promise //here we're using $q and $timeout to mimic a backend call //that will resolve after 1 sec var defer = $q.defer(); $timeout(function(){ model.$setValidity('usernameExists', false); defer.resolve; }, 1000); return defer.promise; }; } } }); 

html:

 
checking....
username exists already

tenga en cuenta el uso de ng-model-options , otra característica genial de 1.3


editar

Aquí hay un plnkr que muestra cómo usar $ http en la directiva. Tenga en cuenta que solo está solicitando otro archivo .json, que contiene un valor verdadero / falso. y la directiva establecerá la validez en el ng-modelo en consecuencia.