Блог

Я не могу найти эту информацию о Angular.js и во время работы я заметил, что эти два значения работают по-разному. В чем разница?

 .directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});
  

Оба scope: true и scope:{} создадут дочернюю область для директивы. Но,

scope:true прототипически наследует свойства от родительского элемента (скажем, контроллера, к которому относится директива), где as 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 для многоразовых угловых директив. Так что вы не будете в конечном итоге возиться со свойствами родительской области

scope : true

Angular JS создаст новую область, унаследовав родительскую область (обычно область контроллера, иначе корневую область приложения).

Примечание: Любые изменения, внесенные в эту новую область, не отразятся на родительской области. Однако, поскольку новая область наследуется от родительской области, любые изменения, внесенные в родительскую область, т. Е. Контроллер, будут отражены в области директивы.

scope : false

Контроллер и директива используют один и тот же объект scope. Это означает, что любые изменения в контроллере или директиве будут синхронизированы.

scope: {}

Для директивы создается новая область, но она не будет унаследована от родительской области. Эта новая область также известна как изолированная область, потому что она полностью отделена от родительской области.

scope: true создает новую область для директивы, которая наследует все от родителей

scope : {} также создает новую область для директивы, но она изолирована, поэтому она ничего не наследует от родителей

Взгляните на эту статью:

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

scope: true создает область, которая не изолирована от родительской области, она наследуется от родительской области, в то время как scope: {} создает область, изолированную от родительской.

Объявление ‘scope’ в директиве AngularJS является свойством ‘Объекта определения директивы’, который фактически возвращается определяемой вами функцией директивы. Параметры ‘scope’ задокументированы в официальной документации angular для объекта определения директивы:

https://docs.angularjs.org/api/ng/service /$compile#директива-определение-объект

Вот объяснение, взятое непосредственно из документации:

область видимости

Свойство scope может быть false, true или object:

false (по умолчанию): Для директивы не будет создана область видимости. Директива будет использовать область видимости своего родителя.

true: для элемента директивы будет создана новая дочерняя область, которая прототипически наследуется от своего родителя. Если несколько директив для одного и того же элемента запрашивают новую область, создается только одна новая область.

{…} (хэш объекта): для шаблона директивы создается новая область «изолировать». Область ‘isolate’ отличается от обычной области тем, что она не наследуется прототипом от своей родительской области. Это полезно при создании повторно используемых компонентов, которые не должны случайно считывать или изменять данные в родительской области. Обратите внимание, что директива области изоляции без шаблона или templateUrl не будет применять область изоляции к своим дочерним элементам.