Perbedaan antara $ scope dan $ rootScope

91

Adakah yang bisa menjelaskan perbedaan antara $ scope dan $ rootScope?

kupikir

$ scope:

Kita bisa mendapatkan properti model-ng di pengontrol tertentu dari halaman tertentu dengan menggunakan ini.

$ rootScope

Kita bisa mendapatkan semua properti model-ng di pengontrol mana pun dari halaman mana pun dengan menggunakan ini.

Apakah ini benar? Atau sesuatu yang lain?

javascript angularjs Sergio Ivanuzzo
sumber
@Cerror! Apa yang Anda maksud, tautan itu tidak membantu pertanyaan saya, Ada $ scope. $ Root, Bukan $ rootScope
$ rootScope berada di bagian atas hierarki semua cakupan di aplikasi angular Anda.
Angad

Jawaban:

88

"$ rootScope" adalah objek induk dari semua objek bersudut "$ scope" yang dibuat di halaman web.

masukkan deskripsi gambar di sini

$ scope dibuat dengan ng-controllersementara $ rootscope dibuat dengan ng-app.

masukkan deskripsi gambar di sini

Aayushi Jain
sumber
69

Perbedaan utamanya adalah ketersediaan properti yang ditetapkan dengan objek. Properti yang ditetapkan dengan $scopetidak dapat digunakan di luar pengontrol tempat properti didefinisikan sedangkan properti yang ditetapkan dengan$rootScope dapat digunakan di mana saja.

Contoh: Jika dalam contoh di bawah ini Anda mengganti $rootScopedengan $scopeproperti departemen tidak akan diisi dari pengontrol pertama di yang kedua

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>
Luaskan cuplikan

Ali Sadiq
sumber
18

Menurut Panduan Pengembang Angular untuk Cakupan :

Setiap aplikasi Angular memiliki tepat satu cakupan root, tetapi mungkin memiliki beberapa cakupan turunan. Aplikasi dapat memiliki beberapa cakupan, karena beberapa perintah membuat cakupan turunan baru (lihat dokumentasi direktif untuk melihat perintah mana yang membuat cakupan baru). Saat cakupan baru dibuat, cakupan tersebut ditambahkan sebagai turunan dari cakupan induknya. Ini membuat struktur pohon yang paralel dengan DOM tempat mereka terpasang.

Baik pengontrol dan arahan memiliki referensi ke ruang lingkup, tetapi tidak untuk satu sama lain. Susunan ini mengisolasi pengontrol dari direktif serta dari DOM. Ini adalah poin penting karena membuat tampilan pengontrol menjadi agnostik, yang sangat meningkatkan kisah pengujian aplikasi.

Gary Stafford
sumber
13

$rootScopetersedia secara global, apa pun pengontrol Anda, sedangkan $scopehanya tersedia untuk pengontrol saat ini dan turunannya.

Tom
sumber
3

Dengan cara lain kita bisa melihat ini; $rootScopebersifat global sedangkan $scopebersifat lokal. Ketika Controllerditugaskan ke halaman, jadi $scopevariabel dapat digunakan di sini karena terikat ke pengontrol ini. Tetapi ketika kami ingin membagikan nilainya ke pengontrol atau layanan lain, maka $rootScopedigunakan (** ada cara alternatif, kami dapat berbagi nilai tetapi dalam hal ini kami ingin menggunakannya $rootScope).

Pertanyaan kedua Anda tentang bagaimana Anda mendefinisikan kedua kata itu benar.

Terakhir sedikit keluar jalur, gunakan $rootScopedengan hati-hati. Mirip dengan cara Anda menggunakan variabel global, bisa jadi merepotkan untuk di-debug dan Anda mungkin secara tidak sengaja mengubah variabel global di suatu tempat di dalam pengatur waktu atau sesuatu yang membuat pembacaan Anda salah.

baiklah
sumber
2

Setiap aplikasi memiliki setidaknya satu rootScope tunggal dan siklus hidupnya sama dengan aplikasi dan setiap pengontrol dapat memiliki cakupannya sendiri, yang tidak dibagikan dengan yang lain.

Lihat artikel ini:

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

User_allowed
sumber
2

Saya sarankan Anda membaca dokumentasi resmi Angular mendalam untuk cakupannya. Mulailah di bagian 'Hierarki Cakupan':

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

Pada dasarnya, $ rootScope dan $ scope keduanya mengidentifikasi bagian tertentu dari DOM di dalamnya

  • Operasi sudut dilakukan
  • variabel yang dideklarasikan sebagai bagian dari $ rootScope atau $ scope tersedia

Apa pun yang termasuk dalam $ rootScope tersedia secara global di seluruh aplikasi Angular Anda, sedangkan apa pun yang termasuk dalam $ scope tersedia dalam bagian DOM tempat cakupan itu berlaku.

$ RootScope diterapkan ke elemen DOM yang merupakan elemen root untuk aplikasi Angular (oleh karena itu dinamai $ rootScope). Saat Anda menambahkan direktif ng-app ke elemen DOM, ini menjadi elemen root DOM tempat $ rootScope tersedia. Dengan kata lain, properti $ rootScope dll. Akan tersedia di seluruh aplikasi Angular Anda.

Angular $ scope (dan semua variabel dan operasinya) tersedia untuk subset tertentu dari DOM dalam aplikasi Anda. Secara khusus, $ scope untuk kontroler tertentu tersedia untuk bagian DOM di mana kontroler tertentu telah diterapkan (menggunakan direktif ng-controller). Perhatikan juga bahwa arahan tertentu misalnya ng-repeat, ketika diterapkan dalam bagian DOM tempat pengontrol telah diterapkan, dapat membuat cakupan anak dari lingkup utama - dalam pengontrol yang sama - pengontrol tidak harus hanya berisi satu ruang lingkup.

Jika Anda melihat HTML yang dihasilkan saat menjalankan aplikasi Angular, Anda dapat dengan mudah melihat elemen DOM mana yang 'berisi' cakupan, karena Angular menambahkan class ng-scope pada elemen apa pun yang telah diterapkan cakupan (termasuk elemen root dari aplikasi, yang memiliki $ rootScope).

Ngomong-ngomong, tanda '$' di awal $ scope dan $ rootScope hanyalah pengenal di Angular untuk hal-hal yang dicadangkan oleh Angular.

Perhatikan bahwa menggunakan $ rootScope untuk berbagi variabel, dll. Antara modul dan pengontrol umumnya tidak dianggap sebagai praktik terbaik. Pengembang JavaScript berbicara tentang menghindari 'polusi' cakupan global dengan berbagi variabel di sana, karena mungkin akan ada bentrokan nanti jika variabel dengan nama yang sama digunakan di tempat lain, tanpa pengembang menyadarinya sudah dideklarasikan di $ rootScope. Pentingnya hal ini meningkat dengan ukuran aplikasi dan tim yang mengembangkannya. Idealnya, $ rootScope hanya akan berisi konstanta atau variabel statis, yang dimaksudkan untuk selalu konsisten di seluruh aplikasi. Cara yang lebih baik untuk berbagi barang di seluruh modul mungkin menggunakan layanan dan pabrik, yang merupakan topik lain!

Chris Halcrow
sumber
2

Keduanya adalah objek skrip Java dan perbedaannya diilustrasikan dengan diagram seperti di bawah ini.

masukkan deskripsi gambar di sini

NTB:
Aplikasi sudut pertama mencoba menemukan properti model atau fungsi apa pun di $ scope, jika tidak menemukan properti di $ scope, maka cari di lingkup induk di hierarki atas. Jika properti masih tidak ditemukan di hierarki atas, maka sudut mencoba menyelesaikan di $ rootscope.

Waqas Ahmed
sumber
1

Gaya baru, seperti John Papa's AngularJS Styleguide , menyarankan agar kita tidak menggunakan sama sekali $scopeuntuk menyimpan properti halaman saat ini. Sebagai gantinya kita harus menggunakan controllerAs with vmpendekatan di mana tampilan mengikat objek pengontrol itu sendiri. Kemudian gunakan variabel tangkap untuk ini saat menggunakan sintaks controllerAs. Pilih nama variabel yang konsisten seperti vm, yang merupakan singkatan dari ViewModel.

Anda masih membutuhkan $scopeuntuk kemampuan menontonnya.

Stan
sumber