Phạm vi (scope) là phần ràng buộc giữa HTML (view) và JavaScript (controller). Phạm vi là 1 đối tượng với các phương thức và thuộc tính có sẵn. Phạm vi sẵn có cho view và controller.
Cách dùng phạm vi
Khi tạo 1 điều khiển trong AngularJS, chúng ta phải đưa đối tượng $scope thành 1 đối số. Các thuộc tính được tạo trong điều khiển, có thể được chuyển đến view như ví dụ sau.
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Dammio";
});
</script>
Khi thêm các thuộc tính vào đối tượng $scope ở controller, view (HTML) sẽ truy cập được đến các thuộc tính này. Trong view, chúng ta không dùng tiền tố $scope mà chỉ dùng tên thuộc tính, ví dụ như {{carname}}.
Cách hiểu về phạm vi
Một ứng dụng AngularJS gồm các phần:
- View: chính là HTML
- Model: nơi chứa dữ liệu cho view hiện tại
- Controller: chứa hàm JavaScript để tương tác với dữ liệu.
Theo đó, phạm vi (scope) được xem là Model. Phạm vi là 1 đối tượng JavaScript với các thuộc tính và phương thức sẵn có cho cả view và controller. Ví dụ sau mô tả việc thay đổi ở view, model và controller cũng cập nhập theo.
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Tên tôi là {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Dammio Com";
});
</script>
Chúng ta phải luôn hiểu rõ scope nằm ở đâu trong ứng dụng. Trong các ví dụ trên, chúng ta chỉ thấy 1 phạm vi (scope), và vậy việc nắm bắt scope ở đâu rất dễ dàng, tuy nhiên với các ứng dụng lớn thì có các phần ở HTML DOM chỉ truy cập đến các phạm vi (scope) nhất định nào đó. Khi dùng chỉ thị ng-repeat, mỗi phần tử truy cập đến đối tượng lặp hiện tại như ví dụ sau.
<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 = ["Dammio", "Ta", "Com"];
});
</script>
Mỗi phần tử <li> truy cập đến đối tượng hiện tại, trong ví dụ là 1 chuỗi (string) được thay cho bằng cách dùng biến x.
Phạm vi gốc (root scope)
Tất cả các ứng dụng có 1 phạm vi gốc ($rootScope) được tạo bởi phần tử HTML chứa chỉ thị ng-app. Phạm vi gốc sẵn có cho toàn bộ ứng dụng. Nếu 1 biến có cùng tên ở phạm vi hiện tại và phạm vi gốc, ứng dụng sẽ dùng biến ở phạm vi hiện tại.
Biến tên là “color” xuất hiện ở cả phạm vi gốc và phạm vi điều khiển.
<body ng-app="myApp">
<p>Biến color ở phạm vi gốc:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>Biến color ở phạm vi điều khiển:</p>
<h1>{{color}}</h1>
</div>
<p>Biến color ở phạm vi gốc:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'xanh';
});
app.controller('myCtrl', function($scope) {
$scope.color = "đỏ";
});
</script>
</body>
Kết luận: bài viết đã giúp các bạn hiểu rõ về cách dùng phạm vi (scope) trong AngularJS, mời các bạn tiếp tục theo dõi các bài viết tiếp theo về AngularJS.
- APA:
Dammio. (2017). [AngularJS] Phần 8: Phạm vi trong AngularJS. https://www.dammio.com/2017/03/01/angularjs-phan-8-pham-vi-trong-angularjs. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {[AngularJS] Phần 8: Phạm vi trong AngularJS},
year = {2017},
url = {https://www.dammio.com/2017/03/01/angularjs-phan-8-pham-vi-trong-angularjs},
urldate = {2025-12-19}
}
![[Bootstrap] Phần 3: Hệ thống lưới nâng cao](https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png "[Bootstrap] Phần 3: Hệ thống lưới nâng cao")
![[AngularJS] Phần 13: Select/Dropdown trong AngularJS](https://www.dammio.com/wp-content/uploads/2017/03/maxresdefault-410x260.jpg "[AngularJS] Phần 13: Select/Dropdown trong AngularJS")
wpDiscuz