AngularJS指令限制A对E

Dar*_*ght 112 html javascript angularjs

我在一个小团队工作,在AngularJS建立并试图保持一些基本标准和最佳实践; 特别是考虑到Angular相对较新.

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

我们有些人使用restrict: 'E'因此具有<my-directive></my-directive>在html.

其他人正在使用restrict: 'A'和拥有<div my-directive></div>html.

然后,当然,您可以使用restrict: 'EA'和使用上述任何一种.

目前这没什么大不了的,虽然当这个项目变得如此之大时,我希望任何人都能看到它,以便轻松了解正在发生的事情.

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

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

Sei*_*Tml 165

restrict用于定义指令类型,它可以是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 -->

  • 不如@nikunj的回答清楚,但在看到他们的答案后,我理解你的... (2认同)

nga*_*ull 100

根据文件:

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

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

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

  • 我已经阅读过那些文档,但错过了这个:)谢谢. (3认同)
  • 这种解释不包括任何陷阱和利弊. (2认同)

小智 46

restrict选项通常设置为:

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

这是文档链接.


Jac*_*lan 7

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

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


Kha*_* TO 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>
Run Code Online (Sandbox Code Playgroud)