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

1 Answer 1

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);