CODEWITHSUNDEEP
angularjsangularjs-directive
Swadesh
Swadesh

Reputation: 651

Difficulty accessing the $scope while using custom directive in angularjs

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

Upvotes: 0

Views: 116

Answers (1)

Martin
Martin

Reputation: 8866

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

Upvotes: 1

Related Questions