Latest web development tutorials

AngularJS Lingkup (Scope)

Lingkup (scope) digunakan dalam link HTML (Lihat) dan JavaScript (controller) antara.

Ruang lingkup adalah obyek, metode dan properti yang tersedia.

Cakupan dapat digunakan dalam tampilan dan pengontrol.

Cara menggunakan Lingkup

Bila Anda membuat AngularJS controller, Anda dapat$ lingkup objek sebagai argumen:

AngularJS contoh

Kontroler atribut yang sesuai dengan atribut melihat pada:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<H1> {{carname}} </ h1>

</ Div>

<Script>
var aplikasi = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ lingkup) {
$ Scope.carname = "Volvo";
});
</ Script>

Coba »

Ketika menambahkan$ lingkup objek dalam controller, tampilan (HTML) bisa mendapatkan properti ini.

Lihat, Anda tidak perlu menambahkan$ lingkup awalan, Anda hanya perlu menambahkan nama atribut, seperti:{{carname}}.

Ikhtisar lingkup

Aplikasi AngularJS terdiri dari:

  • View (tampilan), yaitu HTML.
  • Model (model), tampilan saat ini data yang tersedia.
  • Controller (Controller), fungsi JavaScript, Anda dapat menambahkan atau memodifikasi properti.

lingkup model.

Ruang lingkup adalah JavaScript properti obyek dan metode dengan atribut-atribut dan metode dapat digunakan dalam pandangan dan pengendali.

AngularJS contoh

Jika Anda mengubah tampilan, model dan controller akan diperbarui:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<Input ng-model = "nama ">

<H1> Nama saya {{nama}} </ h1 >

</ Div>

<Script>
var aplikasi = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ lingkup) {
$ Scope.name = "John Dow";
});
</ Script>

Coba »

lingkup lingkup

Memahami ruang lingkup yang sedang Anda gunakan sangat penting.

Dalam kedua kasus, hanya ada satu lingkup lingkup, sehingga proses ini relatif sederhana, namun di proyek-proyek besar, HTML DOM memiliki beberapa lingkup, maka Anda perlu mengetahui lingkup ruang lingkup yang sesuai adalah apa yang Anda gunakan a.

AngularJS contoh

Ketika kita menggunakan perintahng-repeat, telah mengunjungi setiap duplikat duplikat saat objek:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<Ul>
<Li ng-repeat = "x dalam nama"> {{x}} </ li>
</ Ul>

</ Div>

<Script>
var aplikasi = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ lingkup) {
$ Scope.names = [ "Emil", "Tobias", "Linus"];
});
</ Script>

Coba »

Setiap<li> elemen dapat mengakses duplikat saat benda, di sini adalah string yang sesuai, dan variabel xmenunjukkan.

lingkup akar

Semua aplikasi memiliki$ rootScope, itu diterapkan untuk semua elemen HTML ng-aplikasidirektif mengandung.

$ RootScope dapat bertindak atas seluruh aplikasi.Setiap controller dalam lingkup jembatan. Rootscope dengan nilai yang ditetapkan di setiap controller dapat digunakan dalam.

AngularJS contoh

Bila Anda membuat controller untuk $ rootScope lulus sebagai parameter dapat digunakan dalam aplikasi:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<H1> {{Lastname}} Anggota keluarga: </ h1>

<Ul>
<Li ng-repeat = "x dalam nama"> {{x}} {{lastname}} </ li>
</ Ul>

</ Div>

<Script>
var aplikasi = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ lingkup, $ rootScope) {
$ Scope.names = [ "Emil", "Tobias", "Linus"];
$ RootScope.lastname = "Refsnes";
});
</ Script>

Coba »