angularjs - 范围 :{} and scope:true inside directive? 和有什么区别

Question

我找不到有关 Angular.js 的信息，并且我在工作时注意到这两个值的工作方式不同。有什么区别？

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

Answer 1

scope: true 和 scope:{} 都会为该指令创建一个子作用域。但是，

scope:true 原型(prototype)上将从父级(例如指令所在的 Controller )继承属性，而 scope:{} 不会从父级继承属性父级，因此称为隔离

例如，假设我们有一个 Controller c1 和两个指令 d1 和 d2，

app.controller('c1', function($scope){
  $scope.prop = "some value";
});

.directive('d1', function() {
  return {
    scope: true
  };
});

.directive('d2', function() {
  return {
    scope: {}
  };
});

<div ng-controller="c1">
  <d1><d1>
  <d2><d2>
</div>

d1(scope:true) 将有权访问 c1 范围 -> prop，其中 d2 与 c1 范围隔离。

注释 1: d1 和 d2 都会为定义的每个指令创建一个新作用域。

注释 2: 除了两者之间的差异外，对于 scope:true - 对新子作用域所做的任何更改都不会反射(reflect)回父作用域。但是，由于新作用域是从父作用域继承的，因此在 c1 作用域(父作用域)中所做的任何更改都将反射(reflect)在指令作用域中。

提示:使用 scope:{} 或 isolatedscope 来实现可重用的 Angular 指令。这样您就不会弄乱父范围属性