AngularJS Link功能不叫由于属性名归 [英] AngularJS Link function not called due to attribute name normalization

问题描述

我已经通过 HTTPS下面根据自定义验证的文件中定义的验证。组织/引导/表格的。但由于某些原因，链接功能是没有得到调用。我可以告诉它没有得到所谓的，因为日志消息未出现。

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的

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功能不叫

AngularJS Link功能不叫

我在做什么错了？

推荐答案

我得到了它被命名为来的工作，头在HTML和 hasHeaders <中的JavaScript / code>：

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的

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定制指令命名约定的相关文件：

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

正常化

角正常化元素的标签和属性的名称确定
  哪些元素匹配该指令。我们通常是指
  其区分大小写的驼峰规范化名称指令（例如
  ngModel）。然而，由于HTML不区分大小写，大家参考
  在由小写形式DOM的指令，通常使用
  在DOM元素划线分隔的属性（例如NG-模型）。

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

来源：正常化

这篇关于AngularJS Link功能不叫由于属性名归的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！