Question

我正在尝试从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背后的基本原理吗？

Answer 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>匹配在这种情况下，您的代码可以正常运行：

<div class="clearfix"></div>

Answer 2

您需要添加 restrict：＆＃39; E＆＃39; ，以便将指令用作html元素。见：

＆＃13;

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

＆＃13;

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

2 个答案:

关于AngularJS中的属性规范化