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

74 lượt xem

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.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz