AngularJS Link function not called due to attribute name normalization

Question

I've defined a validator by following the documentation under Custom Validation at https://docs.angularjs.org/guide/forms. But for some reason the link function isn't getting called. I can tell it's not getting called because the log message doesn't appear.

HTML

<textarea name="topic1Data" ng-model="inputCtrl.inputValues.topic1Data" rows="10" cols="30" required hasHeaders></textarea>

JavaScript

inputForm.directive('hasHeaders', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            console.log("Evaluating hasAtLeastAHeaderRow validator");
            ctrl.$validators.integer = function(modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    // consider empty models to be valid
                    return true;
                }

                if (INTEGER_REGEXP.test(viewValue)) {
                    // it is valid
                    return true;
                }

                // it is invalid
                return false;
            };
        }
    };
});

Others have reported the same symptom but the cause of my problem seems to be different:

• Link function not called

• AngularJS Link function not called

What am I doing wrong?

Answer 1

I got it to work by naming it has-headers in the HTML and hasHeaders in the JavaScript:

HTML

<textarea name="topic1Data" ng-model="inputCtrl.inputValues.topic1Data" rows="10" cols="30" required has-headers></textarea>

JavaScript

inputForm.directive('hasHeaders', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            console.log("Evaluating hasAtLeastAHeaderRow validator");
            ctrl.$validators.integer = function(modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    // consider empty models to be valid
                    return true;
                }

                if (INTEGER_REGEXP.test(viewValue)) {
                    // it is valid
                    return true;
                }

                // it is invalid
                return false;
            };
        }
    };
});

Here, I think, is the relevant documentation about AngularJS custom directive naming conventions:

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

Source: "Normalization"