current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've declared a custom directive to check the existance of user in angularjs

    var app = angular.module('myApp', []);
app.factory('Contestant',function($http){
                return {
                    checkUser : function(email){
                        return $http.post('ajax/checkuser.php',{email:email});
                    }
                }
            });
app.directive('checkUser',function(Contestant) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs,ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
            Contestant.checkUser(viewValue).success(function (response) {
                ctrl.$setValidity('checkUser', true);
                return viewValue;
            })
            .error(function (data) {
                ctrl.$setValidity('checkUser', false);
                return undefined;
            });
        });
        }
    }

});

HTML

<html ng-app="myApp">
<form name="signup_form" data-ng-controller="myController" novalidate>
<input type="text" id="sponsor" name="sponsor" ng-model="sponsorID" check-user required      />
</form>
</html>

Now when i try to access the value of sponsorID input in myController, it says "undefined"

app.controller('myController', function($scope, $http, $routeParams) {
console.log($scope.sponsorID);
});

How to access the value of sponsorID while the custom directive in place

share|improve this question
    
Have you tried setting the ngmodel binding in the directive by doing: scope: { ..., ngModel: '=', ... } –  Vinny Dec 11 '13 at 18:41

1 Answer 1

up vote 1 down vote accepted

Parsers are used to parse the inputted value before it is set on the model. E.g. "123" is added in an input field, but the numeric value 123 is added to the model. So in my opinion you are misusing that feature, and since the parser never returns a value your model will always be undefined.

Your checkUser returns the viewValue but that's too late: the parser has already been run and since it is missing a return statement the model will get the value undefined.

Quick fix is to add return viewValue; at the bottom of the parser function. But be aware of that your form will be considered valid until the ajax request has finished. (You could mark it as invalid before you call checkUser to fix that.)

Quick fix

Imo you shouldn't use a parser in this case, but simply watch the model.

scope.$watch(attrs.ngModel, function (val) {
  // Mark the form as invalid until the check is complete
  ctrl.$setValidity('checkUser', false);

  Contestant.checkUser(val).then(function () { 
      ctrl.$setValidity('checkUser', true);
  });
});

Plunker watching the model

share|improve this answer
    
Solved the issue. Thanks –  Swadesh Dec 12 '13 at 4:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.