Kawasan AngularJS

作用域（scope）是 HTML（视图）和 JavaScript（控制器）之间的绑定部分。

作用域是具有可用属性和方法的对象。

作用域对视图和控制器都是可用的。

如何使用作用域？

当你在 AngularJS 中创建控制器时，你将 $scope 对象作为参数传递：

Contoh

属性在控制器中创建后，可以在视图中引用：

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

Cuba sendiri

Ketika menambah $scope Menambah properti objek, tampilan (HTML) dapat mengakses properti ini.

Pada tampilan, Anda tidak menggunakan $scope Awalan, Anda hanya perlu mengambil nama properti, seperti {{carname}}。

Memahami domain

Jika kita lihat aplikasi AngularJS terdiri dari beberapa bagian berikut:

  • Tampilan, yaitu HTML.
  • Model, yaitu data yang tersedia bagi tampilan saat ini.
  • Pengawal, yaitu fungsi JavaScript, untuk membuat/mengubah/menghapus/mengawasi data.

Maka domain adalah model.

Domain adalah objek JavaScript yang memiliki properti dan metode, properti dan metode ini tersedia bagi tampilan dan pengawal.

Contoh

Jika ada perubahan di tampilan, model dan pengawal akan diupdate:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Nama saya adalah {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Cuba sendiri

Mengerti domain Anda

Mengerti domain yang Anda tangani kapan saja penting.

Dalam contoh di atas, hanya ada satu domain, jadi mengerti domain Anda bukan masalah, tetapi untuk aplikasi yang lebih besar, beberapa bagian DOM HTML hanya dapat diakses oleh beberapa domain.

Contoh

Saat menangani arahan ng-repeat, setiap pengulangan dapat mengakses 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>

Cuba sendiri

Tiap <li> Elemen dapat mengakses objek pengulangan saat ini, dalam contoh ini adalah string, melalui x untuk dihubungi.

domain root

Setiap aplikasi memiliki $rootScope，yang terdapat di dalam ng-app Domain yang dibuat di atas elemen HTML untuk arahan.

rootScope dapat diakses seluruh aplikasi.

Jika sebuah variabel memiliki nama yang sama di domain saat ini dan di domain root (rootScope), aplikasi akan menggunakan variabel di domain saat ini.

Contoh

Dalam domain pengawal dan rootScope ada variabel yang bernama "color":

<body ng-app="myApp">
<p>Berwarna pilihan rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Skop warna pilihan pengawal:</p>
  <h1>{{color}}</h1>
</div>
<p>Warna pilihan rootScope masih:</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>

Cuba sendiri