javascript - 指令中子作用域和独立作用域的区别

Question

我试图理解 AngularJS 指令中的范围。据我所知，分为三种类型:

1. 从父 Controller 继承的范围
2. 子作用域(作用域:true)
3. 隔离范围(范围:{})

我理解第一个。第二个，“子范围”定义为:

scope prototypically inherited from the parent controller

并且“隔离范围”定义为

scope specific to the directive and not inherited from the parent controller

通俗地说，“子作用域”和“独立作用域”之间到底有什么区别？ 它们各自的用例是什么？

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没有出路。

希望对您有所帮助。