[AngularJS] Phần 8: Phạm vi trong AngularJS

Cập nhật lần cuối: 23/09/2023 lúc 09:53:46

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.

Liên quan: [AngularJS] Phần 4: Các chỉ thị trong AngularJS

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.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

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-01-09} }

Kết nối