Phạm vi là phần ràng buộc giữa HTML (chế độ xem) và JavaScript (bộ điều khiển).
Phạm vi là một đối tượng với các thuộc tính và phương thức có sẵn.
Phạm vi có sẵn cho cả chế độ xem và bộ điều khiển.
Làm thế nào để sử dụng Phạm vi?
Khi bạn tạo một bộ điều khiển trong AngularJS, bạn truyền $scopeđối tượng làm đối số:
Thí dụ
Các thuộc tính được tạo trong bộ điều khiển, có thể được tham chiếu trong khung nhìn:<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>
Khi thêm thuộc tính vào $scope đối tượng trong bộ điều khiển, dạng xem (HTML) có quyền truy cập vào các thuộc tính này.
Trong dạng xem, bạn không sử dụng tiền tố $scope, bạn chỉ tham chiếu đến tên thuộc tính, như {{carname}}.
Hiểu phạm vi
Nếu chúng tôi coi một ứng dụng AngularJS bao gồm:
- Chế độ xem, là HTML.
- Mô hình, là dữ liệu có sẵn cho chế độ xem hiện tại.
- Bộ điều khiển, là hàm JavaScript thực hiện / thay đổi / xóa / kiểm soát dữ liệu.
Sau đó, phạm vi là Model.
Phạm vi là một đối tượng JavaScript với các thuộc tính và phương thức, có sẵn cho cả chế độ xem và bộ điều khiển.
Thí dụ
Nếu bạn thực hiện các thay đổi trong chế độ xem, 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>My name is {{name}}</h1></div><script>
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
Biết phạm vi của bạn
Điều quan trọng là phải biết bạn đang xử lý phạm vi nào, bất kỳ lúc nào.
Trong hai ví dụ trên, chỉ có một phạm vi, vì vậy việc biết phạm vi của bạn không phải là vấn đề, nhưng đối với các ứng dụng lớn hơn, có thể có các phần trong HTML DOM chỉ có thể truy cập một số phạm vi nhất định.
Thí dụ
Khi xử lý ng-repeatchỉ thị, mỗi lần lặp lại có quyền truy cập vào đố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>
Mỗi <li>phần tử có quyền truy cập vào đối tượng lặp lại hiện tại, trong trường hợp này là một chuỗi, được tham chiếu bằng cách sử dụng x.
Phạm vi gốc
Tất cả các ứng dụng đều có $rootScopephạm vi được tạo trên phần tử HTML có chứa ng-appchỉ thị.
RootScope có sẵn trong toàn bộ ứng dụng.
Nếu một biến có cùng tên trong cả phạm vi hiện tại và trong rootScope, ứng dụng sẽ sử dụng tên trong phạm vi hiện tại.
Thí dụ
Một biến có tên “color” tồn tại trong cả phạm vi của bộ điều khiển và trong 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>