AngularJS指令限制A与E


113

我正在一个小团队中工作,使用AngularJS进行构建,并试图维护一些基本标准和最佳实践。特别是考虑到我们相对较新的Angular。

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

restrict: 'E'因此,我们中的某些人<my-directive></my-directive>在html 中使用了它。

别人都在用restrict: 'A',并具有<div my-directive></div>在html。

然后,当然可以使用restrict: 'EA'以上两种方法之一。

目前,这没什么大不了的,尽管当这个项目达到预期的规模时,我希望任何人都可以轻松地了解正在发生的事情。

属性或元素的处理方式是否有利弊?

如果在属性上选择说元素,我们应该知道哪些陷阱?

Answers:


100

根据文档

什么时候应该使用属性而不是元素?创建由模板控制的组件时,请使用元素。常见的情况是在为模板的一部分创建特定于域的语言时。用新功能装饰现有元素时,请使用属性。

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

假设您正在构建一个应在Internet Explorer <= 8上运行的应用程序,AngularJS团队已从AngularJS 1.3中删除了该应用程序的支持,则必须按照以下说明进行操作才能使其正常工作:https://docs.angularjs .org / guide / ie


3
我已经阅读了这些文档,但是错过了这份文档:)谢谢。
Darren Wainwright 2014年

3
本说明不涵盖任何陷阱和优点/缺点。
Konstantin Krass 2014年

相应地更新了我关于陷阱的答案。我没有提及优点/缺点,因为我认为我们在这里更多地讨论最佳实践,尤其是在Angular团队推荐和解释时。
ngasull 2014年

1
“我没有提及优缺点,因为我认为我们在这里更多地讨论最佳实践,尤其是在Angular团队推荐和解释时。” 嗯?:)
Alexander Mills

169

limit是用于定义指令类型的,它可以是A(Attribute),C(Class),E(Element)和M(coMment),让我们假设指令的名称是Doc

类型:用法

A = <div Doc></div>

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

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

M = <!--directive:Doc -->


2
比@nikunj的答案还不清楚,但是看到他们的答案后,我明白了您的意思……
Alexander Mills


7

IE8不支持Element,您必须做一些工作才能使IE8接受自定义标签。

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


5

我知道的陷阱之一是自定义元素的IE问题。从文档中引用:

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>

4

陷阱:

  1. 使用您自己的html元素<my-directive></my-directive>不会在没有解决方法的情况下在IE8上起作用(https://docs.angularjs.org/guide/ie
  2. 使用您自己的html元素会使html验证失败。
  3. 具有相同参数的伪指令可以像这样完成:

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

代替这个:

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

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

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

<my-directive></my-directive>

要么

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

一样。


1
如果要创建具有1个范围参数相等的指令,则使用A会更容易。因为您不必创建其他属性。
Konstantin Krass 2014年

你是什​​么意思?两种选择都有一个属性。
更好的Oliver,2014年

3

元素有2个问题:

  1. 旧版浏览器支持不良。
  2. SEO-Google的引擎不喜欢它们。

使用属性。


将指令作为元素会导致SEO问题?我很惊讶。那replace属性又如何true呢?
chalasr 2015年

1
这些声明需要参考。Point 1在其他地方已经相当成熟,但是我很乐意看到有关Point 2的消息
。– rinogo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.