由于属性名称规范化，未调用 AngularJS 链接函数答案

【问题标题】：AngularJS Link function not called due to attribute name normalization由于属性名称规范化，未调用 AngularJS 链接函数
【发布时间】：2015-04-13 18:44:45
【问题描述】：

我已经按照https://docs.angularjs.org/guide/forms 的自定义验证下的文档定义了一个验证器。但由于某种原因，link 函数没有被调用。我可以说它没有被调用，因为日志消息没有出现。

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

其他人报告了相同的症状，但我的问题的原因似乎不同：

我做错了什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

我通过在 HTML 中将其命名为 has-headers 并在 JavaScript 中将其命名为 hasHeaders 来使其工作：

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

我认为，这里是关于 AngularJS 自定义指令命名约定的相关文档：

标准化

Angular 规范化元素的标签和属性名称以确定哪些元素匹配哪些指令。我们通常指指令由它们区分大小写的 camelCase 规范化名称（例如模型）。但是，由于 HTML 不区分大小写，因此我们指的是 DOM 中的指令以小写形式表示，通常使用 DOM 元素上以破折号分隔的属性（例如 ng-model）。

来源："Normalization"

【讨论】：