Lingkup AngularJS (Lingkup)
Lingkup adalah tautan antara HTML (tampilan) dan JavaScript (controller).
Lingkup adalah objek dengan metode dan properti yang tersedia.
Lingkup dapat diterapkan pada tampilan dan pengontrol.
Cara Menggunakan Lingkup
Saat Anda membuat pengontrol di AngularJS, Anda dapat meneruskan objek $ SCOPE sebagai parameter:
Instance AngularJS
Properti dalam pengontrol sesuai dengan properti pada tampilan:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> {{carname}} </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.carname = "volvo";}); </scrips) {$ scope.carname = "volvo";}); </scripe) {$ scope.carname = "volvo";}); </scrips Nama yang digunakan dalam tampilan di {{}}. </p> </body> </htmlHasil Menjalankan:
Volvo
Buat nama atribut "carname" di controller, yang sesuai dengan nama yang digunakan dalam tampilan di {{}}.
Saat menambahkan objek $ scope ke pengontrol, tampilan (html) bisa mendapatkan properti ini.
Dalam tampilan, Anda tidak perlu menambahkan awalan $ scope, Anda hanya perlu menambahkan nama atribut, seperti: {{carname}}.
Tinjauan Lingkup
Komposisi aplikasi AngularJS adalah sebagai berikut:
Lihat (Lihat), yaitu, html.
Model, data yang tersedia dalam tampilan saat ini.
Pengontrol, mis. Fungsi JavaScript, dapat menambah atau memodifikasi properti.
Lingkup adalah modelnya.
Lingkup adalah objek JavaScript dengan properti dan metode yang dapat digunakan dalam tampilan dan pengontrol.
Instance AngularJS
Jika Anda memodifikasi tampilan, model dan pengontrol juga akan diperbarui sesuai:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> "mycr-pput"> </script> </head> <body> <bod-Ng-PPREP = "NIP"> </skrip> </head> <dig- div ng-model = "name"> nama saya {{name}} </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name = "John doe";}); </script> <p> p> p> po. mempengaruhi nilai atribut yang sesuai dari pengontrol. </p> </body> </html>Hasil Menjalankan:
Nama saya John Doe
Ketika Anda memodifikasi nilai dalam kotak input, itu akan mempengaruhi model dan tentu saja itu juga akan mempengaruhi nilai atribut yang sesuai dari pengontrol.
Lingkup Lingkup
Sangat penting untuk mengetahui ruang lingkup yang saat ini Anda gunakan.
Dalam dua contoh di atas, hanya ada satu ruang lingkup lingkup, sehingga relatif mudah diproses. Namun, dalam proyek besar, ada beberapa lingkup di HTML DOM. Pada saat ini, Anda perlu tahu ruang lingkup mana yang sesuai dengan ruang lingkup yang Anda gunakan.
Instance AngularJS
Ketika kami menggunakan arahan NG-RePeat, setiap duplikat mengakses objek duplikat saat ini:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><ul> <li ng-repeat = "x in name"> {{x}} </li> </ul> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.names = ["emil", "toBias", $ scope ", $ scope.names = [" emil "," tobias ", "Linus"];}); </script> </body> </html>Hasil Menjalankan:
Setiap elemen <li> dapat mengakses objek duplikat saat ini, yang sesuai dengan string, dan diwakili oleh variabel x.
Root SCOPE
Semua aplikasi memiliki $ rootscope yang dapat digunakan di semua elemen HTML yang terkandung dalam arahan NG-APP.
$ rootscope dapat digunakan di seluruh aplikasi. Ini adalah jembatan ruang lingkup di setiap pengontrol. Nilai yang ditentukan dengan rootscope dapat digunakan di setiap pengontrol.
Instance AngularJS
Saat membuat pengontrol, lulus $ rootscope sebagai parameter dan dapat digunakan dalam aplikasi:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl">The last name IS {{lastName}} anggota keluarga: <ul> <li ng-repeat = "x in name"> {{x}} {{lastName}} </li> </ul> </div> <script> {funchler {funch ', fungsi (' myapp ', []; $ scope.names = ["emil", "tobias", "linus"]; </p> </body> </html>Hasil Menjalankan:
Nama belakang adalah anggota keluarga Refsnes:
Perhatikan bahwa $ rootscope dapat diakses baik di dalam maupun di luar objek loop.