Phạm vi AngularJS
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 bộ điều khiển trong AngularJS, bạn truyền đối tượng $scope làm đối số:
Ví dụ
Các thuộc tính được tạo trong bộ điều khiển, có thể được tham chiếu trong dạng xem:
<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> Hãy tự mình thử » Khi thêm thuộc tính vào đối tượng $scope trong bộ điều khiển, chế độ xem (HTML) sẽ có quyền truy cập vào các thuộc tính này.
Trong chế độ 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:
- Xem, đó là HTML.
- Model, là dữ liệu có sẵn cho chế độ xem hiện tại.
- Bộ điều khiển, là hàm JavaScript tạo/thay đổi/xóa/kiểm soát dữ liệu.
Sau đó, phạm vi là Mô hình.
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ả khung nhìn và bộ điều khiển.
Ví dụ
Nếu bạn thực hiện 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> Hãy tự mình thử » 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 và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 vào một số phạm vi nhất định.
Ví dụ
Khi xử lý lệnh ng-repeat , 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>
Hãy tự mình thử » Mỗi phần tử <li> 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ó $rootScope là phạm vi được tạo trên phần tử HTML chứa lệnh ng-app .
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, thì ứng dụng sẽ sử dụng biến đó trong phạm vi hiện tại.
Ví 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>Hãy tự mình thử »