1

Egghead.io对 AngularJS 中的指令限制有很好的解释。自定义指令可以定义如下：

angular.module("app", []).directive("blah", function () {
    return {
        restrict: "A",
        template: "blah directive. nothing to see here."
    };
});

为了提出这个问题，这创建了一个我称之为属性指令（由于）的东西。restrict: "A"这实际上是Angular 对自定义指令的默认限制，该指令可以像这样使用：

<div blah>
  <!-- content of directive -->
</div>

但是，当我想创建自定义指令时，我通常会选择元素指令，例如：

<blah>
  <!-- content of directive -->
</blah>

前一个属性指令比后一个元素指令好多少，为什么选择它作为默认值？

4

3 回答 3

5

这是我的看法，只有：

在 HTML 中定义指令有三种可能的方式——属性、元素和类。类过于松散和混乱，最佳实践是将逻辑与风格分开。元素指令太严格了——一个 DOM 元素中只能有一个“元素”指令。这使它们从一开始就很特别。

一个属性似乎是这两个极端之间最好的中间地带——很明显，允许在一个元素中使用多个指令（如果你正在关注 Egghead 的视频，“指令到指令通信”的超级英雄示例显示了一种“指令层次结构” "，元素取代属性。此外，这在大多数时候非常重要（我为 Intranet 应用程序编程，所以对我来说不是）属性允许 angularJS 模板成为有效的 HTML。

编辑-我的两分钱是无关紧要的-在任何实际情况下，信任“默认”配置作为主要的限制选项是一个坏主意-明确设置它可以明确，毫无疑问的指令（尤其是在团队项目中工作，而且任何时候，真的）

于 2013-05-08T18:55:34.410 回答
3

Angular 1.3 将默认值更改为“AE”。请参阅：https ://docs.angularjs.org/api/ng/service/$compile#directive-definition-object 。

我猜它被改变了，因为它是“限制”，而不是“包含”。因此，“restrict”的默认值应该限制得很少。

这意味着什么——如果你看到“restrict:'E'”行，它实际上意味着“这不是用来作为属性的”，而不是“我只是想将其用作元素”。

于 2015-04-16T23:17:43.477 回答
0

我对此的看法是：

基于元素的指令通常表示结构功能。

例如，我通常对弹出窗口、对话框、选项卡式小部件和可重用小部件使用基于元素的指令。然后我可以向它们添加基于属性的指令（例如，向指令添加一个ng-click）<ui-button>，但元素名称（即指令名称）表示正在构建的结构语义。

于 2013-05-08T19:25:41.527 回答