Lingkup AngularJS
Lingkup adalah bagian yang mengikat antara HTML (tampilan) dan JavaScript (pengontrol).
Ruang lingkup adalah objek dengan properti dan metode yang tersedia.
Cakupan tersedia untuk tampilan dan pengontrol.
Bagaimana Cara Menggunakan Lingkupnya?
Saat Anda membuat pengontrol di AngularJS, Anda meneruskan $scopeobjek sebagai argumen:
Contoh
Properties yang dibuat di controller, dapat dirujuk 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>
Saat menambahkan properti ke $scope
objek di pengontrol, tampilan (HTML) mendapatkan akses ke properti ini.
Dalam tampilan, Anda tidak menggunakan awalan $scope, Anda hanya merujuk ke nama properti, seperti {{carname}}.
Memahami Ruang Lingkup
Jika kami menganggap aplikasi AngularJS terdiri dari:
- Lihat, yang merupakan HTML.
- Model, yang merupakan data yang tersedia untuk tampilan saat ini.
- Controller, yaitu fungsi JavaScript yang membuat/mengubah/menghapus/mengontrol data.
Maka ruang lingkupnya adalah Model.
Lingkup adalah objek JavaScript dengan properti dan metode, yang tersedia untuk tampilan dan pengontrol.
Contoh
Jika Anda membuat perubahan pada tampilan, model dan pengontrol 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>
Ketahui Ruang Lingkup Anda
Penting untuk mengetahui lingkup mana yang Anda hadapi, kapan saja.
Dalam dua contoh di atas hanya ada satu cakupan, jadi mengetahui cakupan Anda bukanlah masalah, tetapi untuk aplikasi yang lebih besar mungkin ada bagian di DOM HTML yang hanya dapat mengakses cakupan tertentu.
Contoh
Saat berhadapan dengan ng-repeatdirektif, 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>
Setiap <li>elemen memiliki akses ke objek pengulangan saat ini, dalam hal ini string, yang dirujuk dengan menggunakan x.
Lingkup Akar
Semua aplikasi memiliki a $rootScopeyang merupakan ruang lingkup yang dibuat pada elemen HTML yang berisi ng-apparahan.
RootScope tersedia di seluruh aplikasi.
Jika sebuah variabel memiliki nama yang sama baik di lingkup saat ini dan di rootScope, aplikasi menggunakan yang ada di lingkup saat ini.
Contoh
Variabel bernama "warna" ada di ruang lingkup pengontrol dan di rootScope:
<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>