发表新帖
发表新帖

AngularJS Directive Restrict A vs E

后端 未结
关注
7 1554
萌比男神i
萌比男神i 2020-12-12 11:43

I\'m working in a small team, building in AngularJS and trying to maintain some basic standards & best practices; especially given we\'re relatively new with Angular.

相关标签:
7条回答
  • 北荒
    2020-12-12 12:01

    One of the pitfalls as I know is IE problem with custom elements. As quoted from the docs:

    3) you do not use custom element tags such as (use the attribute version instead)

    4) if you do use custom element tags, then you must take these steps to make IE 8 and below happy

    <!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>
    0 讨论(0)
  • 时光说笑
    2020-12-12 12:05

    The restrict option is typically set to:

    • 'A' - only matches attribute name
    • 'E' - only matches element name
    • 'C' - only matches class name
    • 'M' - only matches comment

    Here is the documentation link.

    0 讨论(0)
  • 情书的邮戳
    2020-12-12 12:17

    2 problems with elements:

    1. Bad support with old browsers.
    2. SEO - Google's engine doesn't like them.

    Use Attributes.

    0 讨论(0)
  • 再見小時候
    2020-12-12 12:18

    Element is not supported in IE8 out of the box you have to do some work to make IE8 accept custom tags.

    One advantage of using an attribute over an element is that you can apply multiple directives to the same DOM node. This is particularly handy for things like form controls where you can highlight, disable, or add labels etc. with additional attributes without having to wrap the element in a bunch of tags.

    0 讨论(0)
  • 情深已故
    2020-12-12 12:20

    Pitfall:

    1. Using your own html element like <my-directive></my-directive> wont work on IE8 without workaround (https://docs.angularjs.org/guide/ie)
    2. Using your own html elements will make html validation fail.
    3. Directives with equal one parameter can done like this:

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

    Instead of this:

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

    We dont use custom html elements, because if this 2 facts.

    Every directive by third party framework can be written in two ways:

    <my-directive></my-directive>

    or

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

    does the same.

    0 讨论(0)
  • 遇见更好的自我
    2020-12-12 12:23

    According to the documentation:

    When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.

    Edit following comment on pitfalls for a complete answer:

    Assuming you're building an app that should run on Internet Explorer <= 8, whom support has been dropped by AngularJS team from AngularJS 1.3, you have to follow the following instructions in order to make it working: https://docs.angularjs.org/guide/ie

    0 讨论(0)
 看不清?
提交回复
热议问题