I have a js or angular problem. I don't know why I'm getting $parse isnt defined when I'm running this:

function link(scope, elem, attrs, ctrl) {
    scope.$watch(function() {
        var valid = $parse(attrs.fieldMatch)(scope) === ctrl.$modelValue;
        ctrl.$setValidity('mismatch', valid);
    });
}

function fieldMatch($parse) {
    return {
        restrict:'AE',
        require: 'ngModel',
        link: link
    }
}

angular.module('fieldMatch', [])
    .directive('fieldMatch', fieldMatch);

I have a js or angular problem. I don't know why I'm getting $parse isnt defined when I'm running this:

function link(scope, elem, attrs, ctrl) {
    scope.$watch(function() {
        var valid = $parse(attrs.fieldMatch)(scope) === ctrl.$modelValue;
        ctrl.$setValidity('mismatch', valid);
    });
}

function fieldMatch($parse) {
    return {
        restrict:'AE',
        require: 'ngModel',
        link: link
    }
}

angular.module('fieldMatch', [])
    .directive('fieldMatch', fieldMatch);

• javascript
• angularjs

Share Improve this question Follow edited Oct 9, 2015 at 16:49 LionC 3,10611 gold badge2323 silver badges3131 bronze badges asked Oct 30, 2014 at 14:38 user4198877user4198877

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The link function you defined is outside of the scope that would be created when calling fieldMatch(), thus, it has no visibility of $parse. Define it inside the directive's definition function, like so:

function fieldMatch($parse) {
  return {
    restrict:'AE',
    require: 'ngModel',
    link: link
  }

  function link(scope, elem, attrs, ctrl) {
    scope.$watch(function() {
      var valid = $parse(attrs.fieldMatch)(scope) === ctrl.$modelValue;
      ctrl.$setValidity('mismatch', valid);
  });
}

angular.module('fieldMatch', [])
  .directive('fieldMatch', fieldMatch);