Хто-небудь може пояснити різницю між $ scope і $ rootScope?
Я думаю
За допомогою цього ми можемо отримати властивості ng-моделі в конкретному контролері з конкретної сторінки.
За допомогою цього ми можемо отримати всі властивості ng-моделі в будь-якому контролері з будь-якої сторінки.
Це правильно? Або щось інше?
Відповіді:
"$ rootScope" - це батьківський об'єкт усіх кутових об'єктів "$ 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
Рекомендую ознайомитись з офіційною поглибленою документацією про сфери застосування. Почніть із розділу "Ієрархії сфери застосування":
https://docs.angularjs.org/guide/scope
По суті, $ rootScope і $ scope ідентифікують конкретні частини DOM, в яких
Все, що належить до $ rootScope, доступне у всьому світі у вашому додатку Angular, тоді як все, що належить до $-області, доступне в тій частині 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 міститиме лише константи або статичні змінні, які призначені постійно узгоджуватися в додатку. Кращим способом обміну матеріалами між модулями може бути використання сервісів та фабрик, що є іншою темою!
Обидва вони є об'єктами сценарію Java, і різниця ілюструється діаграмою, як показано нижче.
NTB:
Спочатку кутова програма намагається знайти властивість будь-якої моделі або функції в $ scope, якщо вона не знайшла властивості в $ scope, то вона здійснює пошук у батьківській області у верхній ієрархії. Якщо властивість все ще не знайдено у верхній ієрархії, тоді angular намагається вирішити в $ rootcope.
Нові стилі, такі як AngularJS Styleguide Джона Папи , припускають, що ми взагалі не повинні використовувати $scopeдля збереження властивостей поточної сторінки. Натомість ми повинні використовувати controllerAs with vmпідхід, коли подання прив'язується до самого об'єкта контролера. Потім використовуйте для цього змінну захоплення, коли використовуєте синтаксис controllerAs. Виберіть послідовну назву змінної, таку як vm, що розшифровується як ViewModel.
Вам все одно знадобиться $scopeйого можливість перегляду.