范围:{}和范围:内部指令为真之间的区别是什么?

I can't find this information about Angular.js and I notice while I was working that those two values work differently. What's the difference?

我找不到角的信息。js和我在工作时注意到这两个值的工作方式不同。有什么区别呢?

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

5 个解决方案

#1

Both scope: true and scope:{} will create a child scope for the directive. But,

作用域:true和scope:{}将为该指令创建子作用域。但是,

scope:true will prototypically inherit the properties from the parent(say the controller where the directive comes under) where as scope:{} will not inherit the properties from the parent and hence called isolated

范围:true将会继承父类的属性(例如，指令出现的控制器)，其作用域:{}不会从父类继承属性，因此称为隔离。

For instance lets say we have a controller c1 and two directives d1 and d2,

例如我们有一个控制器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) will have access to c1 scope -> prop where as d2 is isolated from the c1 scope.

d1(scope:true)将访问c1 scope——>道具，其中d2与c1 scope隔离。

Note 1: Both d1 and d2 will create a new scope for each directive defined.

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

Note 2: Apart from the difference between the two, for scope:true - Any changes made to the new child scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the c1 scope(the parent scope) will be reflected in the directive scope.

注意2:除了两者之间的差异之外，作用域:true——对新子作用域所做的任何更改都不会反映回父作用域。但是，由于新作用域是从父作用域继承的，所以在c1作用域(父作用域)中所做的任何更改都将反映在指示作用域中。

Tip: Use scope:{} or isolated scope for reusable angular directives. So that you won't end up messing with the parent scope properties

提示:使用范围:{}或用于可重用角指示的隔离范围。这样你就不会弄乱父作用域的属性

#2

scope : "true"

范围:“真正的”

Angular JS will create a new scope by inheriting parent scope ( usually controller scope, else application’s root Scope ).

通过继承父作用域(通常是控制器作用域，其他应用程序的根作用域)，角度JS将创建一个新的作用域。

Note : Any changes made to this new scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the parent scope i.e. controller will be reflected in the directive scope.

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

scope : "false"

范围:“假”

The controller and directive are using the same scope object. This means any changes to the controller or directive will be in sync.

控制器和指令使用相同的作用域对象。这意味着对控制器或指令的任何更改都是同步的。

scope : "{}"

范围:“{ }”

New scope created for the directive, but it will not be inherited from the parent scope. This new scope also known as Isolated scope because it is completely detached from its parent scope.

为该指令创建的新范围，但它不会从父范围继承。这个新作用域也称为隔离作用域，因为它完全与父作用域分离。

#3

scope: true creates a new scope for the directive that inherits everything from the parents

作用域:true为从父指令继承所有内容的指令创建了一个新的作用域

scope : {} also creates a new scope for the directive, but it's isolated, so it doesn't inherit anything from the parents

作用域:{}还为该指令创建一个新的作用域，但是它是隔离的，所以它不从父指令继承任何东西

Take a look a this article:

看看这篇文章:

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

#4

scope: true creates a scope that is not isolated from the parents scope, it inherits from the parents scope, while scope: {} creates a scope isolated from the parent.

作用域:true创建了一个与父类范围无关的范围，它继承了父类的范围，而scope:{}创建了与父类隔离的范围。

#5

The 'scope' declaration in an AngularJS directive is a property of the 'Directive Definition Object', which is what's actually being returned by directive function that you define. The options for 'scope' are documented in the official angular documentation for a Directive Definition Object:

AngularJS指令中的“作用域”声明是“指令定义对象”的属性，它实际上是由您定义的指令函数返回的。“范围”的选项在指示定义对象的官方角度文档中有说明:

https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object

https://docs.angularjs.org/api/ng/service/编译# directive-definition-object美元

Here's the explanation taken directly from the documentation:

以下是直接从文件中得到的解释:

scope

The scope property can be false, true, or an object:

范围属性可以是false、true或对象:

false (default): No scope will be created for the directive. The directive will use its parent's scope.

false(默认):没有为指令创建范围。该指令将使用父指令的作用域。

true: A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created.

true:将为该指令的元素创建一个新的子作用域，该子作用域通常从父作用域继承。如果同一元素上的多个指令请求一个新范围，则只创建一个新范围。

{...} (an object hash): A new "isolate" scope is created for the directive's template. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope. Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

{…}(对象散列):为该指令的模板创建一个新的“隔离”范围。“隔离”范围不同于正常范围，因为它没有从父范围继承原型。这在创建可重用组件时非常有用，不应意外地读取或修改父范围中的数据。注意，没有模板或templateUrl的隔离范围指令不会将隔离范围应用到其子元素。

#1