lingkup adalah bagian yang mengikat antara HTML (tampilan) dan JavaScript (controller).
Ruang lingkup adalah obyek dengan sifat dan metode yang tersedia.
Ruang lingkup ini tersedia untuk kedua pandangan dan controller.
Cara Menggunakan Lingkup?
Ketika Anda membuat controller di AngularJS, Anda melewati $scope objek sebagai argumen:
Contoh
Sifat dibuat di controller, dapat disebut dalam tampilan:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script> Cobalah sendiri " Ketika menambahkan properti ke $scope objek dalam controller, tampilan (HTML) mendapat akses ke properti ini.
Dalam pandangan ini, Anda tidak menggunakan awalan $scope , Anda hanya merujuk ke PROPERTYNAME sebuah, seperti {{carname}} .
Memahami Lingkup
Jika kita mempertimbangkan aplikasi AngularJS terdiri dari:
- Lihat, yang merupakan HTML.
- Model, yang merupakan data yang tersedia untuk tampilan saat ini.
- Controller, yang merupakan fungsi JavaScript yang membuat / perubahan / menghapus / mengontrol data.
Maka lingkup adalah Model.
Ruang lingkup adalah objek JavaScript dengan properti dan metode, yang tersedia untuk kedua pandangan dan controller.
Contoh
Jika Anda membuat perubahan dalam tampilan, model dan controller akan diperbarui:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script> Cobalah sendiri " Tahu Lingkup Anda
Hal ini penting untuk mengetahui ruang lingkup Anda berurusan dengan, setiap saat.
Dalam dua contoh di atas hanya ada satu ruang lingkup, sehingga mengetahui ruang lingkup Anda tidak menjadi masalah, tetapi untuk aplikasi yang lebih besar bisa ada bagian dalam DOM HTML yang hanya dapat mengakses lingkup tertentu.
Contoh
Ketika berhadapan dengan ng-repeat direktif, setiap pengulangan memiliki akses ke objek pengulangan saat ini:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
Cobalah sendiri " Setiap <li> elemen memiliki akses ke objek pengulangan saat ini, dalam hal ini string, yang disebut dengan menggunakan x .
akar Cakupan
Semua aplikasi memiliki $rootScope yang merupakan ruang lingkup dibuat pada elemen HTML yang berisi ng-app direktif.
rootScope tersedia di seluruh aplikasi.
Jika variabel memiliki nama yang sama di kedua lingkup saat ini dan di rootScope, aplikasi menggunakan satu di lingkup saat ini.
Contoh
Sebuah variabel bernama "warna" ada di lingkup kedua controller dan di rootScope yang:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body> Cobalah sendiri "