我在一个小团队中工作，使用 AngularJS 构建并尝试维护一些基本标准和最佳实践；尤其是考虑到我们对 Angular 还比较陌生。
我的问题是关于指令的。更准确地说，restrict 选项。
我们中的一些人使用restrict: 'E'，因此在 html 中有<my-directive></my-directive>。
其他人使用 restrict: 'A' 并在 html 中使用 <div my-directive></div>。
然后，当然，您可以使用restrict: 'EA' 并使用上述任何一种。
目前这没什么大不了的，但当这个项目达到它的规模时，我希望任何人看着它都能轻松了解发生了什么。
属性或元素的处理方式有优缺点吗？
如果选择说元素而不是属性，我们应该知道哪些陷阱？
【问题讨论】：
标签： javascript html angularjs
restrict 用于定义指令类型，可以是A（属性）、C（类）、E（元素）和M（注释），假设指令是Doc：
类型：用法
A =
<div Doc></div>C =
<div class="Doc"></div>E =
<Doc data="book_data"></Doc>M =
<!--directive:Doc -->
【讨论】：
什么时候应该使用属性而不是元素？ 您正在创建一个控制模板的组件。这 这种情况的常见情况是当您创建特定于域的 部分模板的语言。当你是时使用一个属性 用新功能装饰现有元素。
编辑以下关于陷阱的评论以获得完整答案：
假设你正在构建一个应该在 Internet Explorer https://docs.angularjs.org/guide/ie
【讨论】：
【讨论】：
IE8 不支持开箱即用的元素，您必须做一些工作才能使 IE8 接受自定义标签。
在元素上使用属性的一个优点是您可以将多个指令应用于同一个 DOM 节点。这对于诸如表单控件之类的东西特别方便，您可以在其中突出显示、禁用或添加带有附加属性的标签等，而无需将元素包装在一堆标签中。
【讨论】：
据我所知，其中一个陷阱是自定义元素的 IE 问题。引用自docs:
3) 您不要使用自定义元素标签，例如（使用 属性版本）
4) 如果您确实使用自定义元素标签，那么您必须采取这些步骤来 让 IE 8 及以下版本快乐
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
【讨论】：
陷阱：
<my-directive></my-directive>）将无法在 IE8 上运行 (https://docs.angularjs.org/guide/ie)<div data-my-directive="ValueOfTheFirstParameter"></div>
而不是这个：
<my-directive my-param="ValueOfTheFirstParameter"></my-directive>
我们不使用自定义 html 元素，因为如果这 2 个事实。
第三方框架的每个指令都可以用两种方式编写：
<my-directive></my-directive>
或
<div data-my-directive></div>
做同样的事情。
【讨论】：
元素的2个问题：
使用属性。
【讨论】：
replace 属性到true 呢？