AngularJS Scopes: Quản lý dữ liệu trong ứng dụng

Scopes trong AngularJS là các đối tượng JavaScript được sử dụng để lưu trữ dữ liệu trong ứng dụng. Chúng tạo ra một ngữ cảnh cho các biểu thức và directive, giúp quản lý dữ liệu một cách hiệu quả.

Các loại Scope

• $rootScope: Scope gốc của ứng dụng, được chia sẻ cho tất cả các controller và directive.
• Child scope: Scope con được tạo ra khi một controller hoặc directive được tạo. Child scope kế thừa các thuộc tính từ scope cha.

Truy cập dữ liệu từ Scope

Để truy cập dữ liệu từ một scope, bạn sử dụng biểu thức {{ expression }} hoặc các directive như ng-model.

HTML

<div ng-app="myApp" ng-controller="MyController">
  <p>Tên: {{ name }}</p>
  <input type="text" ng-model="name">
</div>

Truyền dữ liệu giữa các Scope

• Từ cha sang con: Dữ liệu từ scope cha được tự động kế thừa bởi scope con.
• Từ con sang cha: Sử dụng $parent để truy cập scope cha.
• Giữa các scope không liên quan: Sử dụng services để chia sẻ dữ liệu giữa các scope không liên quan.

Tạo Child Scope

Khi một controller hoặc directive được tạo, nó tạo ra một child scope.

JavaScript

angular.module('myApp', [])
  .controller('ParentController', function($scope) {
    $scope.parentProperty = 'Giá trị từ scope cha';
  })
  .controller('ChildController', function($scope) {
    // Child scope kế thừa thuộc tính parentProperty từ scope cha
  });

Các tính năng của Scopes

• Lưu trữ dữ liệu: Lưu trữ dữ liệu cho các biểu thức và directive.
• Tạo ngữ cảnh: Tạo một ngữ cảnh cho các biểu thức và directive.
• Truyền dữ liệu: Truyền dữ liệu giữa các scope.
• Tạo child scope: Tạo các child scope để tổ chức ứng dụng.

Các ứng dụng của Scopes

• Lưu trữ dữ liệu cho các biểu thức và directive.
• Tạo các component tái sử dụng được.
• Truyền dữ liệu giữa các component.