Difficulty accessing the $scope while using custom directive in angularjs

Question

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

Have you tried setting the ngmodel binding in the directive by doing: scope: { ..., ngModel: '=', ... } — Vinny
– Vinny, Commented Dec 11, 2013 at 18:41

Martin · Accepted Answer · 2013-12-11 20:18:45Z

1

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

edited Dec 11, 2013 at 20:18

answered Dec 11, 2013 at 19:55

Martin

8,8662 gold badges37 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swadesh Over a year ago

Solved the issue. Thanks

Collectives™ on Stack Overflow

Difficulty accessing the $scope while using custom directive in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related