AngularJS tut 8 : AngularJS Scope

0
(0)

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 một bộ điều khiển trong AngularJS, bạn truyền $scopeđối tượng làm đối số:

Thí dụ

Các thuộc tính được tạo trong bộ điều khiển, có thể được tham chiếu trong khung nhìn:<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 $scope đối tượng trong bộ điều khiển, dạng xem (HTML) có quyền truy cập vào các thuộc tính này.

Trong dạng 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:

  • Chế độ xem, là HTML.
  • Mô hình, là dữ liệu có sẵn cho chế độ xem hiện tại.
  • Bộ điều khiển, là hàm JavaScript thực hiện / thay đổi / xóa / kiểm soát dữ liệu.

Sau đó, phạm vi là Model.

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ả chế độ xem và bộ điều khiển.

Thí dụ

Nếu bạn thực hiện các 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, 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 một số phạm vi nhất định.

Thí dụ

Khi xử lý ng-repeatchỉ thị, 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 <li>phần tử 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ó $rootScopephạm vi được tạo trên phần tử HTML có chứa ng-appchỉ thị.

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, ứng dụng sẽ sử dụng tên trong phạm vi hiện tại.

Thí 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ử »

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing