Может ли кто-нибудь объяснить разницу между $ scope и $ rootScope?
Я думаю
Используя this, мы можем получить свойства ng-модели в конкретном контроллере с конкретной страницы.
Мы можем получить все свойства ng-модели в любом контроллере с любой страницы, используя this.
Это правильно? Или что-нибудь еще?
Ответы:
«$ rootScope» является родительским объектом для всех объектов angular «$ scope», созданных на веб-странице.
$ scope создается с помощью, ng-controllerа $ rootcope создается с помощью ng-app.
Основное отличие - наличие закрепленного за объектом свойства. Свойство, присвоенное с $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>Согласно Руководству разработчика Angular по областям :
Каждое приложение Angular имеет ровно одну корневую область видимости, но может иметь несколько дочерних областей. Приложение может иметь несколько областей, поскольку некоторые директивы создают новые дочерние области (см. Документацию по директивам, чтобы узнать, какие директивы создают новые области). Когда создаются новые области, они добавляются как дочерние по отношению к родительской области. Это создает древовидную структуру, которая параллельна DOM, к которому они прикреплены.
И контроллеры, и директивы ссылаются на область видимости, но не друг на друга. Такое расположение изолирует контроллер как от директивы, так и от DOM. Это важный момент, поскольку он заставляет контроллеры воспринимать информацию как агностик, что значительно улучшает историю тестирования приложений.
Мы можем взглянуть на это с другой стороны; $rootScopeявляется глобальным, в то время $scopeкак локальным. Когда Controllerназначается странице, поэтому здесь $scopeможно использовать переменную, потому что она привязывается к этому контроллеру. Но когда мы хотим передать его значение другим контроллерам или службам, $rootScopeоно используется (** есть альтернативные способы, мы можем поделиться значениями между ними, но в этом случае мы хотим использовать $rootScope).
Ваш второй вопрос о том, как вы определяете эти два слова, верен.
Наконец, немного сбился с пути, пожалуйста, используйте его $rootScopeс осторожностью. Подобно тому, как вы используете глобальные переменные, отладка может быть сложной задачей, и вы можете случайно изменить глобальную переменную где-то внутри таймера или что-то, что делает ваше чтение неверным.
Каждое приложение имеет по крайней мере один rootScope, и его жизненный цикл такой же, как и у приложения, и каждый контроллер может иметь свою собственную область действия, которая не используется совместно с другими.
Взгляните на эту статью:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Я рекомендую вам прочитать официальную подробную документацию по Angular для областей видимости. Начните с раздела «Иерархии областей видимости»:
https://docs.angularjs.org/guide/scope
По сути, $ rootScope и $ scope определяют определенные части DOM, внутри которых
Все, что принадлежит $ 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 будет содержать только константы или статические переменные, которые должны быть постоянными во всем приложении. Лучшим способом обмена данными между модулями может быть использование сервисов и фабрик, что является другой темой!
Оба являются объектами сценария Java, и разница показана на диаграмме ниже.
NTB:
первое приложение angular пытается найти свойство любой модели или функции в $ scope, если оно не нашло свойство в $ scope, тогда оно выполняет поиск в родительской области в верхней иерархии. Если свойство все еще не найдено в верхней иерархии, то angular пытается разрешить в $ rootcope.
Новые стили, такие как руководство по стилям AngularJS Джона Папы , предполагают, что мы вообще не должны использовать их $scopeдля сохранения свойств текущей страницы. Вместо этого мы должны использовать controllerAs with vmподход, при котором представление привязывается к самому объекту контроллера. Затем используйте для этого переменную захвата при использовании синтаксиса controllerAs. Выберите согласованное имя переменной, например vm, что означает ViewModel.
$scopeТем не менее, вам все равно понадобится его возможность просмотра.