AngularJS 中属性规范化背后的基本原理答案

【问题标题】：Rationale behind attribute normalisation in AngularJSAngularJS 中属性规范化背后的基本原理
【发布时间】：2017-12-18 03:32:36
【问题描述】：

我正在尝试向w3schools 学习 AngularJS。为了创建自定义指令，Custom Directives

提供了以下示例

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

这里的指令名称在创建时（w3TestDirective）和在 HTML 中使用的名称（w3-test-directive）是不同的。如果我将 HTML 元素用作 <w3TestDirective>，我在输出中看不到任何内容。

我看到 AngularJS 需要执行属性规范化。但是，我不明白为什么 AngularJS 需要执行规范化。有人能帮我理解 AngularJS 背后的原理吗？

【问题讨论】：

只是提示：w3schools.com 不是那么好。比方说..它完全不好。它在使用更高版本的 AngularJS 时确实有效，但指令中没有 restrict 参数。它确实适用于AngularJS 1.5+。
@lin 我同意你的看法。但是我需要和示例来复制。我在这里的真正意图是只了解属性规范化背后的基本原理。
我通过一个工作示例为您创建了 2 个可能的解决方案。一次用于AngularJS 1.0，一次用于AngularJS 1.5+。我还添加了关于 restrict 参数背后的逻辑的解释。
我们通常通过区分大小写的驼峰式规范化名称来引用指令（例如ngModel）。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。见AngularJS Developer Guide - Directive Normalization。
因为 HTML 不区分大小写，指令 getUpTime 和 getuptime 会发生冲突。规范化使其get-up-time 和getuptime 不冲突。

标签： javascript html angularjs angular-directive

【解决方案1】：

关于 AngularJS 中的属性规范化

我们通常通过区分大小写的 camelCase 来引用指令标准化名称（例如 ngModel）。然而，由于 HTML 是不区分大小写，我们在 DOM 中使用小写来引用指令表单，通常在 DOM 元素上使用破折号分隔的属性（例如 ng模型）。见AngularJS Developer Guide - Directive Normalization。 – georgeawg

感谢georgeawg，我无法更好地解释它。

在使用AngularJS 1.x 时，您必须配置restrict，在您的情况下，E 是element。 restict: 'E' 与您的元素标签 <w3-test-directive></w3-test-directive> 匹配。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict: 'E',
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

使用AngularJS 1.5+ 时，restrict 默认设置为EA，它将与element 和attribute 匹配。 restrict: 'EA' 匹配 <w3-test-directive></w3-test-directive> 和 <span w3-test-directive=""></span>在这种情况下，您的代码可以正常工作：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<w3-test-directive></w3-test-directive>
<span w3-test-directive=""></span>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

【讨论】：

【解决方案2】：

您需要添加 restrict: 'E'，以便将指令用作 html 元素。看到这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
     restrict: 'E',
     template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

【讨论】：