Khu vực AngularJS

Scope (scope) là phần liên kết giữa HTML (view) và JavaScript (controller).

Scope là đối tượng có các thuộc tính và phương thức có thể sử dụng.

Scope có thể truy cập được từ cả view và controller.

Làm thế nào để sử dụng scope?

Khi bạn tạo controller trong AngularJS, bạn sẽ $scope Đối tượng được truyền làm tham số:

Thực thể

Các thuộc tính được tạo trong controller có thể được tham chiếu trong view:

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

Thử ngay

Khi trong bộ điều khiển $scope Khi thêm thuộc tính vào đối tượng,视图 (HTML) có thể truy cập các thuộc tính này.

Trong视图, bạn không sử dụng $scope tiền tố, bạn chỉ cần tham chiếu tên thuộc tính, ví dụ như {{carname}}。

Hiểu domain

Nếu chúng ta xem ứng dụng AngularJS như được组成 từ các phần sau:

  • View, tức là HTML.
  • Mô hình, tức là dữ liệu có thể sử dụng được bởi视图.
  • Bộ điều khiển, tức là hàm JavaScript, được sử dụng để tạo/điều chỉnh/xóa/kiểm soát dữ liệu.

Vậy domain chính là mô hình.

Domain là đối tượng JavaScript có thuộc tính và phương thức, các thuộc tính và phương thức này đều có thể truy cập được từ视图 và bộ điều khiển.

Thực thể

Nếu bạn đã thay đổi trong视图, mô hình và bộ điều khiển sẽ được cập nhật:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Tên của tôi là {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Thử ngay

Hiểu domain của bạn

Việc hiểu domain bạn đang xử lý vào bất kỳ thời điểm nào rất quan trọng.

Trong hai ví dụ trên, chỉ có một域, vì vậy việc hiểu domain của bạn không là vấn đề, nhưng đối với ứng dụng lớn hơn, một số phần của HTML DOM có thể chỉ có thể truy cập một số domain.

Thực thể

Khi xử lý hướng dẫn ng-repeat, mỗi lần lặp lại đều có thể truy cập đối tượng lặp lại hiện tại:

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

Thử ngay

Mỗi <li> Các phần tử đều có thể truy cập đối tượng lặp lại hiện tại, trong ví dụ này là một chuỗi, thông qua việc sử dụng x để tham chiếu.

root scope

Mỗi ứng dụng đều có $rootScopenó nằm trong ng-app Đ域 được tạo trên phần tử HTML của hướng dẫn.

rootScope có thể truy cập trong toàn bộ ứng dụng.

Nếu một biến có cùng tên trong域 hiện tại và rootScope, ứng dụng sẽ sử dụng biến trong域 hiện tại.

Thực thể

Trong cả域 của bộ điều khiển và rootScope đều có một biến tên là "color":

<body ng-app="myApp">
<p>Màu sắc yêu thích của rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Mục tiêu màu yêu thích của kontroller:</p>
  <h1>{{color}}</h1>
</div>
<p>Màu yêu thích của rootScope vẫn là:</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>

Thử ngay