一尘不染

scope:{}和scope:true内部指令之间有什么区别?

angularjs

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

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

阅读 296

收藏
2020-07-04

共1个答案

一尘不染

两者scope: truescope:{}都会为指令创建一个子作用域。但,

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(scope:true)将访问c1范围-> prop,因为d2与c1范围隔离。

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

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

提示:scope:{}isolated scope用于可重复使用的角度指令。这样您就不会弄乱父范围属性

2020-07-04