AngularJS 指令限制 A 对 E

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

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

Some of us are using restrict: 'E' thus having <my-directive></my-directive> in the html.

其他的则在 html 中使用 restrict: 'A'和 <div my-directive></div>。

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

目前这没什么大不了的，尽管当这个项目达到它将要达到的最大规模时，我希望任何人都能看着它，轻松地理解正在发生的事情。

Are there pros/cons to either the attribute or element way of doing things?

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

144326 次浏览
小开
最佳答案

根据 文件:

什么时候应该使用属性和元素? 使用元素时 您正在创建一个控制模板的组件 常见的情况是在创建特定于域的 模板的某些部分使用的语言 decorating an existing element with new functionality.

Edit following comment on pitfalls for a complete answer:

假设你正在构建一个应用程序，它应该运行在 Internet Explorer < = 8上，而 AngularJS 团队已经从 AngularJS 1.3中放弃了对这个应用程序的支持，那么你必须遵循以下指示才能让它工作:

小开

据我所知，其中一个陷阱就是自定义元素的 IE 问题:

3) you 不要 use custom element tags such as (use the 属性版本)

4) if you 使用 custom element tags, then you must take these steps to 使 IE8及以下版本更加开心

<!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>
小开

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

在元素上使用属性的一个优点是可以对同一 DOM 节点应用多个指令。这对于像表单控件这样的事情特别方便，您可以突出显示、禁用或添加带有附加属性的标签等，而不必将元素包装在一堆标签中。

小开

2 problems with elements:

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

使用属性。

小开

陷阱:

  1. 使用你自己的 html 元素，比如 <my-directive></my-directive>，如果没有解决方案(https://docs.angularjs.org/guide/ie) ，就不能在 IE8上工作
  2. 使用自己的 html 元素将导致 html 验证失败。
  3. Directives with equal one parameter can done like this:

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

而不是这样:

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

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

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

<my-directive></my-directive>

或者

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

也一样。

小开

限制选项通常设置为:

  • ‘ A’-only 匹配属性名称
  • 'E' - only matches element name
  • “ C”-只匹配类名
  • 'M' - only matches comment

Here is the 文件连结.

小开

Limit 用于定义指令类型，它可以是 A(Attribute)、 C(Class)、 E(Element)和 M(comMment) ，让我们假设指令的名称是 Doc:

类型: 用途

A = <div Doc></div>

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

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

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


提交答案