AngularJS 指令限制 A 与 E

Posted 2023-02-22

技术标签:

【中文标题】AngularJS 指令限制 A 与 E【英文标题】：AngularJS Directive Restrict A vs E 【发布时间】：2014-06-06 21:49:45 【问题描述】：

我在一个小团队中工作，使用 AngularJS 构建并尝试维护一些基本标准和最佳实践；尤其是考虑到我们对 Angular 还比较陌生。

我的问题是关于指令的。更准确地说，restrict 选项。

我们中的一些人使用restrict: 'E'，因此在 html 中有<my-directive></my-directive>。

其他人使用 restrict: 'A' 并在 html 中使用 <div my-directive></div>。

然后，当然，您可以使用restrict: 'EA' 并使用上述任何一种。

目前这没什么大不了的，但当这个项目达到它的规模时，我希望任何人看着它都能轻松了解发生了什么。

属性或元素的处理方式有优缺点吗？

如果选择说元素而不是属性，我们应该知道哪些陷阱？

【问题讨论】：

【参考方案1】：

restrict 用于定义指令类型，可以是A（属性）、C（类）、E（元素）和M（注释），假设指令是Doc：

类型：用法

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

【讨论】：

不如@nikunj 的回答清楚，但看到他们的回答后，我明白了你的... @AlexanderMills 并不是说这是一个更好或更坏的答案 b/c，但它几乎与 what's in the AngularJS docs 完全相同。【参考方案2】：

根据the documentation：

什么时候应该使用属性而不是元素？ 您正在创建一个控制模板的组件。这这种情况的常见情况是当您创建特定于域的部分模板的语言。当你是时使用一个属性用新功能装饰现有元素。

编辑以下关于陷阱的评论以获得完整答案：

假设你正在构建一个应该在 Internet Explorer https://docs.angularjs.org/guide/ie

【讨论】：

我已经阅读了这些文档，但错过了这个 :) 谢谢。本说明不涉及任何陷阱和利弊。相应地更新了我关于陷阱的答案。我没有提到优点/缺点，因为我认为我们在这里更多地讨论最佳实践，尤其是在 Angular 团队推荐和解释时。 " 我没有提到优点/缺点，因为我认为我们在这里更多地讨论最佳实践，尤其是在 Angular 团队推荐和解释时。"嗯？ :)【参考方案3】：

restrict 选项通常设置为：

'A' - 仅匹配属性名称 'E' - 仅匹配元素名称 'C' - 只匹配类名 'M' - 只匹配评论

这里是documentation link。

【讨论】：

简单干净【参考方案4】：

IE8 不支持开箱即用的元素，您必须做一些工作才能使 IE8 接受自定义标签。

在元素上使用属性的一个优点是您可以将多个指令应用于同一个 DOM 节点。这对于诸如表单控件之类的东西特别方便，您可以在其中突出显示、禁用或添加带有附加属性的标签等，而无需将元素包装在一堆标签中。

【讨论】：

【参考方案5】：

据我所知，其中一个陷阱是自定义元素的 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>

【讨论】：

【参考方案6】：

陷阱：

<my-directive></my-directive>

<div data-my-directive="ValueOfTheFirstParameter"></div>

而不是这个：

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

我们不使用自定义 html 元素，因为如果这 2 个事实。

第三方框架的每个指令都可以用两种方式编写：

<my-directive></my-directive>

或

<div data-my-directive></div>