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

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

Я думаю,

$объем:

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

$rootScope

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

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

Ответ 1

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

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

Ответ 2

Основное отличие заключается в доступности свойства, назначенного объекту. Свойство, назначенное с помощью $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>

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

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

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

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

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

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

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

Ответ 8

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

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