AngularJS: Scope trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Scope là sự gắn kết giữa HTML (view) và JavaScript (controller).

Scope là một đối tượng bao hàm cả các thuộc tính và phương thức..

Scope bao hàm cả view và controller.

Cách sử dụng Scope

Khi bạn tạo một controller trong AngularJS thì bạn truyền đối tượng $scope đi dưới dạng đối số.

Ví dụ

Các thuộc tính được tạo trong controller có thể được tham chiếu trong view:

<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 các thuộc tính vào đối tượng $scope trong controller thì view (HTML) sẽ truy cập được tới các thuộc tính này.

Trong view thì bạn không sử dụng tiền tố $scope, mà bạn chỉ cần gọi trực tiếp các thuộc tính và phương thức của $scope theo dạng {{tên_thuộc_tính của $scope}}.

Hiểu sâu hơn về Scope

Giả sử ta có một ứng dụng AngularJS bao gồm:

  • View, là HTML.
  • Model, là dữ liệu sử dụng cho view.
  • Controller, là hàm JavaScript dùng để tạo/sửa/xóa/điều phối dữ liệu.

Thì các thuộc tính hay phương thức của scope chính là Model.

Scope là một đối tượng JavaScript bao gồm các thuộc tính và phương thức áp dụng được cho cả view và controller.

Ví dụ

Nếu bạn thay đổi view thì model và controller sẽ được update:

<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>

Nắm rõ Scope

Nắm rõ được Scope sẽ rất quan trọng để biết được scope đang xử lý ở phạm vi nào, vào thời điểm nào.

Trong hai ví dụ trên thì chỉ có một scope, vì thế việc nắm rõ về scope không khó, nhưng với một lượng lớn các ứng dụng có thể có chứa các phần trong DOM HTML thì chỉ có thể truy cập một số scope nhất định.

Ví dụ

Khi sử dụng chỉ thị ng-repeat thì mỗi lần lặp lại sẽ có quyền truy cập được vào đối tượng lặp hiện thờ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 phần tử <li> sẽ truy cập tới đối tượng lặp hiện thời mà trong trường hợp này là đối tượng chuỗi, là đối tượng được tham chiếu bằng cách sử dụng x.

Scope gốc

Tất cả các ứng dụng đều có một $rootScope là scope được tạo trên phần tử HTML chứa chỉ thị 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ả scope hiện thời và  rootScope, thì ứng dụng sẽ sử dụng biến đó trong scope hiện thời.

Ví dụ

Một biến có tên "color" có sẵn trong cả scope của controller và rootScope:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<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>

<p>Notice that controller's color variable does not overwrite the rootScope's color value.</p>

</body>
</html>
» Tiếp: Filter trong AngularJS
« Trước: Controller trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!