AngularJS 中属性规范化背后的基本原理
Posted
技术标签:
【中文标题】AngularJS 中属性规范化背后的基本原理【英文标题】：Rationale behind attribute normalisation in AngularJS 【发布时间】：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 不冲突。
【参考方案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>【讨论】：
以上是关于AngularJS 中属性规范化背后的基本原理的主要内容，如果未能解决你的问题，请参考以下文章
逗号语法：语句中悬挂逗号背后的基本原理是 SyntaxError