Question

我在一个小团队中工作，在AngularJS建立并试图保持一些基本标准＆amp;最佳做法;特别是考虑到Angular的相对较新。

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

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

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

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

目前没什么大不了的，但是当这个项目变得如此大，我希望任何人都能看到它，以便轻松了解正在发生的事情。< / p>

对于做事物的属性或元素方式是否有利弊？

如果选择说元素超过属性，我们应该知道任何陷阱吗？

Answer 1

restrict用于定义指令类型，它可以是A（属性），C（类），E（元素）和M（coMment）），让我们假设指令的名称是Doc：

类型：用法

A = <div Doc></div>

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

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

M = 

Answer 2

根据the documentation：

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

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

假设您正在构建一个应该在Internet Explorer＆lt; = 8上运行的应用程序，AngularJS团队已经从AngularJS 1.3中删除了哪些支持，您必须按照以下说明操作才能使其正常工作：{{3 }}

Answer 3

restrict选项通常设置为：

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

这是documentation link。

Answer 4

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

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

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

Answer 6

陷阱：

使用您自己的html元素（如<my-directive></my-directive>）无法使用IE8而无需解决方法（https://docs.angularjs.org/guide/ie）
使用您自己的html元素会使html验证失败。
具有相同一个参数的指令可以这样做：

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

而不是：

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

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

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

<my-directive></my-directive>

或

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

也一样。

Answer 7

元素的2个问题：

对旧浏览器的支持不足。
SEO - 谷歌的引擎不喜欢它们。

使用属性。

AngularJS指令限制A对E

7 个答案: