scope:{}和scope:true指令内部有什么区别？

Question

我找不到关于Angular.js的这些信息,我注意到在我工作的时候,这两个值的工作方式不同.有什么不同？

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

Answer 1

双方scope: true并scope:{}会为指令子作用域.但,

scope:true将原型继承父级的属性(比如指令所在的控制器),其中scope:{}不会从父级继承属性,因此调用isolated

例如,假设我们有一个控制器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(范围:true)将有权访问c1范围 - > prop,其中d2与c1范围隔离.

注1: d1和d2都将为每个定义的指令创建一个新的范围.

注2:除了两者之间的差异之外,对于scope:true- 对新子范围所做的任何更改都不会反映回父范围.但是,由于新范围是从父范围继承的,因此在c1范围(父范围)中所做的任何更改都将反映在指令范围中.

提示:使用scope:{}或isolated scope用于可重复使用的角度指令.这样您就不会最终搞乱父作用域属性

Answer 2

范围:"真实"

Angular JS将通过继承父作用域(通常是控制器作用域,否则是应用程序的根作用域)来创建新作用域.

注意:对此新作用域所做的任何更改都不会反映回父作用域.但是,由于新范围是从父范围继承的,因此在父范围(即控制器)中所做的任何更改都将反映在指令范围中.

范围:"假"

控制器和指令使用相同的范围对象.这意味着对控制器或指令的任何更改都将保持同步.

范围 : "{}"

为该指令创建的新范围,但不会从父范围继承.此新作用域也称为隔离作用域,因为它与其父作用域完全分离.