指令中子作用域和隔离作用域的区别

Question

我试图理解AngularJS指令中的作用域。据我所知，有三种类型：

1. 从父控制器继承的作用域
2. 子作用域（scope: true）
3. 隔离作用域（scope: {}）

我理解第一种。第二种“子作用域”的定义为：

从父控制器原型继承的作用域

“隔离作用域”的定义为：

指令特定的作用域，不从父控制器继承

通俗地说，“子作用域”和“隔离作用域”有什么区别？它们各自的用例是什么？

- Tarun Dugar

Answer 1

关于使用哪种作用域类型，以下是我遵循的一些指导原则。这些知识也源自于查看多个Angular和第三方指令。

如果您只需要向现有DOM元素添加一些行为，则使用父级作用域，例如ng-click，ng-show，ng-class。这些指令不带有自己的UI模板，只扩展现有html元素的行为。

当您的指令计划在作用域上添加新属性并且不想使用这些属性污染父作用域时，请使用 scope:true 或子作用域。很少有Angular指令会这样做，ng-repeat 会为每个重复的元素创建一个子作用域，并在子作用域上公开一些属性，如$index。我建议至少创建这个，当你创建指令时。

使用 scope:{} 创建的隔离作用域，用于真正的组件中，其中对指令的输入通过作用域属性明确指定，并且不会受到父作用域的直接影响。这有助于我们创建真正的自包含可重用指令。需要注意的是，隔离指令存在一些挑战，例如两个隔离指令不能应用于同一HTML元素。

关于作用域继承的细节，您必须阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes，没有其他途径。

希望这有所帮助。

- Chandermani

Answer 2

最简单的理解隔离作用域的方式可能是看两个相同指令的实例。

<div ng-controller="someController">
    <my-directive>
      <input ng-model ="user.name">
      {{ user.name}}
    </my-directive>
    <my-directive>
      <input ng-model ="user.name">
      {{ user.name}}
    </my-directive>
</div>

没有隔离作用域，user.name将在父作用域中。因此，在任一实例中更改输入都会在另一个实例中进行更改，因为它们都引用相同的变量。

当作用域被隔离时，每个实例都有自己的user.name值，并且一个实例中的更改不会影响另一个实例。

- charlietfl

---

好的，隔离作用域是在我们不想使用控制器范围时使用的。但是子作用域呢？它是什么时候使用的？“原型继承”是什么意思？ - Tarun Dugar

建议您谷歌搜索继承术语。这是JavaScript对象概念的基础。 - charlietfl

这肯定会对你有所帮助 https://github.com/angular/angular.js/wiki/Understanding-Scopes - Chandermani

看起来很复杂 ;) 有没有关于何时使用哪个作用域的解释？ - Tarun Dugar

@TarunDugar 并不完全正确，因为指令非常强大，可以用于执行许多不同的操作。 - charlietfl

Answer 3

当scope设置为“true”时，AngularJS会通过继承父作用域来创建一个新的作用域。

当scope设置为“false”（或未设置任何内容）时，控制器和指令将使用相同的作用域对象。

当scope: {}时，指令获得一个新的隔离作用域。

详细信息请查看此处。

- Ararat Harutyunyan