AngularJS属性规范化背后的理论基础
我正试着向AngularJS学习w3schools。为了创建自定义指令，自定义指令提供了下面的示例
<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-指令)。如果我使用HTML作为<w3TestDirective>，那么在输出中什么也看不到。
我看到AngularJS需要执行属性规范化。然而，我不明白为什么AngularJS需要执行正常化。有人能帮我理解AngularJS背后的原理吗？
回答 2
Stack Overflow用户
发布于 2017-07-13 11:29:34
关于AngularJS中的属性规范化
我们通常使用区分大小写的camelCase规范化名称(例如ngModel)来引用指令。但是，由于HTML是不区分大小写的，所以我们通过小写形式引用DOM中的指令，通常对DOM元素(例如ng模型)使用破折号分隔的属性。见AngularJS开发人员指南-指令规范化。- 土工爪
多亏了土工爪，我解释得再好不过了。
在使用AngularJS 1.x时，您必须配置restrict，这在您的例子中是E for 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>
Stack Overflow用户
发布于 2017-07-13 11:22:41
您需要添加限制：'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>
https://stackoverflow.com/questions/45079127
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号