В чем разница между областью действия: {} и scope: true внутри директивы?

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

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

Ответы

Ответ 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 (scope: true) будет иметь доступ к области c1 → prop, где, поскольку d2 изолирован от области c1.

Примечание 1: Оба d1 и d2 создадут новую область для каждой определяемой директивы.

Примечание 2: Помимо разницы между ними, для scope:true - Любые изменения, внесенные в новую область дочерних объектов, не будут возвращаться к родительской области. Однако, поскольку новая область наследуется от родительской области, любые изменения, сделанные в области c1 (родительская область), будут отражаться в области директивы.

Совет. Используйте scope:{} или isolated scope для многократных директив angular. Чтобы вы не вступали в конфликты с свойствами родительской области.

Ответ 2

область действия: "true"

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

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

область действия: "false"

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

область действия: "{}"

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

Ответ 3

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

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

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

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

Ответ 4

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