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

Question

我正在尝试从w3schools学习AngularJS。 创建自定义指令下面的例子已经在提供自定义指令

 <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-model）上使用破折号分隔的属性。 请参阅《 AngularJS开发人员指南-指令规范化》。 – 乔治

多亏了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>

Answer 2

您需要添加限制：'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中属性规范化的基本原理

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-07-13 11:29:34

关于AngularJS中的属性规范化

解决方案2
1 2017-07-13 11:22:41

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-07-13 11:29:34

关于AngularJS中的属性规范化

解决方案2 1 2017-07-13 11:22:41

解决方案1
2 已采纳 2017-07-13 11:29:34

解决方案2
1 2017-07-13 11:22:41