Разница между $ scope и $ rootScope

Question 1

Может ли кто-нибудь объяснить разницу между $ scope и $ rootScope?

Я думаю

$ scope:

Используя this, мы можем получить свойства ng-модели в конкретном контроллере с конкретной страницы.

$ rootScope

Мы можем получить все свойства ng-модели в любом контроллере с любой страницы, используя this.

Это правильно? Или что-нибудь еще?

Question 2

«$ rootScope» является родительским объектом для всех объектов angular «$ scope», созданных на веб-странице.

$ scope создается с помощью, ng-controllerа $ rootcope создается с помощью ng-app.

Question 3

Основное отличие - наличие закрепленного за объектом свойства. Свойство, присвоенное с $scopeпомощью, не может использоваться вне контроллера, в котором оно определено, тогда как свойство, назначенное с $rootScopeпомощью, можно использовать где угодно.

Пример: Если в примере ниже , вы заменить $rootScopeс $scopeсобственностью отдел не будет заполняться из первого контроллера во втором

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>

Развернуть фрагмент

Question 4

Согласно Руководству разработчика Angular по областям :

Каждое приложение Angular имеет ровно одну корневую область видимости, но может иметь несколько дочерних областей. Приложение может иметь несколько областей, поскольку некоторые директивы создают новые дочерние области (см. Документацию по директивам, чтобы узнать, какие директивы создают новые области). Когда создаются новые области, они добавляются как дочерние по отношению к родительской области. Это создает древовидную структуру, которая параллельна DOM, к которому они прикреплены.

И контроллеры, и директивы ссылаются на область видимости, но не друг на друга. Такое расположение изолирует контроллер как от директивы, так и от DOM. Это важный момент, поскольку он заставляет контроллеры воспринимать информацию как агностик, что значительно улучшает историю тестирования приложений.

Question 5

$rootScopeдоступен глобально, независимо от того, в каком контроллере вы находитесь, тогда как $scopeдоступен только текущему контроллеру и его дочерним элементам.

Question 6

Мы можем взглянуть на это с другой стороны; $rootScopeявляется глобальным, в то время $scopeкак локальным. Когда Controllerназначается странице, поэтому здесь $scopeможно использовать переменную, потому что она привязывается к этому контроллеру. Но когда мы хотим передать его значение другим контроллерам или службам, $rootScopeоно используется (** есть альтернативные способы, мы можем поделиться значениями между ними, но в этом случае мы хотим использовать $rootScope).

Ваш второй вопрос о том, как вы определяете эти два слова, верен.

Наконец, немного сбился с пути, пожалуйста, используйте его $rootScopeс осторожностью. Подобно тому, как вы используете глобальные переменные, отладка может быть сложной задачей, и вы можете случайно изменить глобальную переменную где-то внутри таймера или что-то, что делает ваше чтение неверным.

Question 7

Каждое приложение имеет по крайней мере один rootScope, и его жизненный цикл такой же, как и у приложения, и каждый контроллер может иметь свою собственную область действия, которая не используется совместно с другими.

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

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Question 8

Я рекомендую вам прочитать официальную подробную документацию по Angular для областей видимости. Начните с раздела «Иерархии областей видимости»:

https://docs.angularjs.org/guide/scope

По сути, $ rootScope и $ scope определяют определенные части DOM, внутри которых

Угловые операции выполняются
переменные, объявленные как часть $ rootScope или $ scope, доступны

Все, что принадлежит $ rootScope, доступно глобально в вашем приложении Angular, тогда как все, что принадлежит $ scope, доступно в той части DOM, к которой применяется эта область.

$ RootScope применяется к элементу DOM, который является корневым элементом для приложения Angular (отсюда и название $ rootScope). Когда вы добавляете директиву ng-app к элементу DOM, он становится корневым элементом DOM, в котором доступен $ rootScope. Другими словами, свойства и т. Д. $ RootScope будут доступны во всем вашем приложении Angular.

Область Angular $ (и все ее переменные и операции) доступна для определенного подмножества DOM в вашем приложении. В частности, $ scope для любого конкретного контроллера доступна той части DOM, к которой был применен этот конкретный контроллер (с помощью директивы ng-controller). Однако обратите внимание, что определенные директивы, например, ng-repeat, при применении в той части DOM, где был применен контроллер, могут создавать дочерние области основной области - в пределах одного контроллера - контроллер не обязательно содержит только одну область.

Если вы посмотрите на сгенерированный HTML-код при запуске приложения Angular, вы легко увидите, какие элементы DOM «содержат» область видимости, поскольку Angular добавляет класс ng-scope к любому элементу, к которому была применена область (включая корневой элемент приложения, имеющего $ rootScope).

Кстати, знак «$» в начале $ scope и $ rootScope - это просто идентификатор в Angular для вещей, которые зарезервированы Angular.

Обратите внимание, что использование $ rootScope для обмена переменными и т. Д. Между модулями и контроллерами обычно не считается лучшей практикой. Разработчики JavaScript говорят о том, чтобы избежать «загрязнения» глобальной области видимости путем совместного использования переменных в ней, поскольку позже могут возникнуть конфликты, если переменная с тем же именем будет использоваться где-то еще, без того, чтобы разработчик осознал, что она уже объявлена в $ rootScope. Важность этого возрастает с увеличением размера приложения и команды, которая его разрабатывает. В идеале $ rootScope будет содержать только константы или статические переменные, которые должны быть постоянными во всем приложении. Лучшим способом обмена данными между модулями может быть использование сервисов и фабрик, что является другой темой!

Question 9

Оба являются объектами сценария Java, и разница показана на диаграмме ниже.

NTB:
первое приложение angular пытается найти свойство любой модели или функции в $ scope, если оно не нашло свойство в $ scope, тогда оно выполняет поиск в родительской области в верхней иерархии. Если свойство все еще не найдено в верхней иерархии, то angular пытается разрешить в $ rootcope.

Question 10

Новые стили, такие как руководство по стилям AngularJS Джона Папы , предполагают, что мы вообще не должны использовать их $scopeдля сохранения свойств текущей страницы. Вместо этого мы должны использовать controllerAs with vmподход, при котором представление привязывается к самому объекту контроллера. Затем используйте для этого переменную захвата при использовании синтаксиса controllerAs. Выберите согласованное имя переменной, например vm, что означает ViewModel.

$scopeТем не менее, вам все равно понадобится его возможность просмотра.

Answer 1

91

Может ли кто-нибудь объяснить разницу между $ scope и $ rootScope?

Я думаю

$ scope:

Используя this, мы можем получить свойства ng-модели в конкретном контроллере с конкретной страницы.

$ rootScope

Мы можем получить все свойства ng-модели в любом контроллере с любой страницы, используя this.

Это правильно? Или что-нибудь еще?

javascript angularjs Серджио Ивануццо
источник

@CodeError! Что вы имеете в виду, эта ссылка не помогает в моем вопросе, есть $ scope. $ Root, а не $ rootScope

$ rootScope находится на вершине иерархии всех областей в вашем приложении angular.

Angad

Answer 2

@CodeError! Что вы имеете в виду, эта ссылка не помогает в моем вопросе, есть $ scope. $ Root, а не $ rootScope

Answer 3

$ rootScope находится на вершине иерархии всех областей в вашем приложении angular.

Angad

Answer 4

«$ rootScope» является родительским объектом для всех объектов angular «$ scope», созданных на веб-странице.

$ scope создается с помощью, ng-controllerа $ rootcope создается с помощью ng-app.

Answer 5

Основное отличие - наличие закрепленного за объектом свойства. Свойство, присвоенное с $scopeпомощью, не может использоваться вне контроллера, в котором оно определено, тогда как свойство, назначенное с $rootScopeпомощью, можно использовать где угодно.

Пример: Если в примере ниже , вы заменить $rootScopeс $scopeсобственностью отдел не будет заполняться из первого контроллера во втором

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>

Развернуть фрагмент

Answer 6

Согласно Руководству разработчика Angular по областям :

Каждое приложение Angular имеет ровно одну корневую область видимости, но может иметь несколько дочерних областей. Приложение может иметь несколько областей, поскольку некоторые директивы создают новые дочерние области (см. Документацию по директивам, чтобы узнать, какие директивы создают новые области). Когда создаются новые области, они добавляются как дочерние по отношению к родительской области. Это создает древовидную структуру, которая параллельна DOM, к которому они прикреплены.

И контроллеры, и директивы ссылаются на область видимости, но не друг на друга. Такое расположение изолирует контроллер как от директивы, так и от DOM. Это важный момент, поскольку он заставляет контроллеры воспринимать информацию как агностик, что значительно улучшает историю тестирования приложений.

Answer 7

$rootScopeдоступен глобально, независимо от того, в каком контроллере вы находитесь, тогда как $scopeдоступен только текущему контроллеру и его дочерним элементам.

Answer 8

Мы можем взглянуть на это с другой стороны; $rootScopeявляется глобальным, в то время $scopeкак локальным. Когда Controllerназначается странице, поэтому здесь $scopeможно использовать переменную, потому что она привязывается к этому контроллеру. Но когда мы хотим передать его значение другим контроллерам или службам, $rootScopeоно используется (** есть альтернативные способы, мы можем поделиться значениями между ними, но в этом случае мы хотим использовать $rootScope).

Ваш второй вопрос о том, как вы определяете эти два слова, верен.

Наконец, немного сбился с пути, пожалуйста, используйте его $rootScopeс осторожностью. Подобно тому, как вы используете глобальные переменные, отладка может быть сложной задачей, и вы можете случайно изменить глобальную переменную где-то внутри таймера или что-то, что делает ваше чтение неверным.

Answer 9

Каждое приложение имеет по крайней мере один rootScope, и его жизненный цикл такой же, как и у приложения, и каждый контроллер может иметь свою собственную область действия, которая не используется совместно с другими.

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

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 10

Я рекомендую вам прочитать официальную подробную документацию по Angular для областей видимости. Начните с раздела «Иерархии областей видимости»:

https://docs.angularjs.org/guide/scope

По сути, $ rootScope и $ scope определяют определенные части DOM, внутри которых

Угловые операции выполняются
переменные, объявленные как часть $ rootScope или $ scope, доступны

Все, что принадлежит $ rootScope, доступно глобально в вашем приложении Angular, тогда как все, что принадлежит $ scope, доступно в той части DOM, к которой применяется эта область.

$ RootScope применяется к элементу DOM, который является корневым элементом для приложения Angular (отсюда и название $ rootScope). Когда вы добавляете директиву ng-app к элементу DOM, он становится корневым элементом DOM, в котором доступен $ rootScope. Другими словами, свойства и т. Д. $ RootScope будут доступны во всем вашем приложении Angular.

Область Angular $ (и все ее переменные и операции) доступна для определенного подмножества DOM в вашем приложении. В частности, $ scope для любого конкретного контроллера доступна той части DOM, к которой был применен этот конкретный контроллер (с помощью директивы ng-controller). Однако обратите внимание, что определенные директивы, например, ng-repeat, при применении в той части DOM, где был применен контроллер, могут создавать дочерние области основной области - в пределах одного контроллера - контроллер не обязательно содержит только одну область.

Если вы посмотрите на сгенерированный HTML-код при запуске приложения Angular, вы легко увидите, какие элементы DOM «содержат» область видимости, поскольку Angular добавляет класс ng-scope к любому элементу, к которому была применена область (включая корневой элемент приложения, имеющего $ rootScope).

Кстати, знак «$» в начале $ scope и $ rootScope - это просто идентификатор в Angular для вещей, которые зарезервированы Angular.

Обратите внимание, что использование $ rootScope для обмена переменными и т. Д. Между модулями и контроллерами обычно не считается лучшей практикой. Разработчики JavaScript говорят о том, чтобы избежать «загрязнения» глобальной области видимости путем совместного использования переменных в ней, поскольку позже могут возникнуть конфликты, если переменная с тем же именем будет использоваться где-то еще, без того, чтобы разработчик осознал, что она уже объявлена в $ rootScope. Важность этого возрастает с увеличением размера приложения и команды, которая его разрабатывает. В идеале $ rootScope будет содержать только константы или статические переменные, которые должны быть постоянными во всем приложении. Лучшим способом обмена данными между модулями может быть использование сервисов и фабрик, что является другой темой!

Answer 11

Оба являются объектами сценария Java, и разница показана на диаграмме ниже.

NTB:
первое приложение angular пытается найти свойство любой модели или функции в $ scope, если оно не нашло свойство в $ scope, тогда оно выполняет поиск в родительской области в верхней иерархии. Если свойство все еще не найдено в верхней иерархии, то angular пытается разрешить в $ rootcope.

Answer 12

Новые стили, такие как руководство по стилям AngularJS Джона Папы , предполагают, что мы вообще не должны использовать их $scopeдля сохранения свойств текущей страницы. Вместо этого мы должны использовать controllerAs with vmподход, при котором представление привязывается к самому объекту контроллера. Затем используйте для этого переменную захвата при использовании синтаксиса controllerAs. Выберите согласованное имя переменной, например vm, что означает ViewModel.

$scopeТем не менее, вам все равно понадобится его возможность просмотра.

Разница между $ scope и $ rootScope

$ scope:

$ rootScope

Ответы: