$ Scope trong AngularJS là gì? Hướng dẫn với ví dụ

Mục lục:

Anonim

$ Scope trong AngularJS là gì?

$ scope trong AngularJS là một đối tượng tích hợp về cơ bản liên kết "controller" và "view". Người ta có thể xác định các biến thành viên trong phạm vi bên trong bộ điều khiển mà sau đó khung nhìn có thể được truy cập.

Hãy xem xét ví dụ dưới đây:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Giải thích mã:

  1. Tên của mô-đun là "ứng dụng"
  2. Tên của bộ điều khiển là "HelloWorldCntrl"
  3. Đối tượng phạm vi là đối tượng chính được sử dụng để truyền thông tin từ bộ điều khiển đến khung nhìn.
  4. Đã thêm biến thành viên vào đối tượng phạm vi

Thiết lập hoặc thêm Hành vi

Để phản ứng với các sự kiện hoặc thực hiện một số loại tính toán / xử lý trong Chế độ xem, chúng ta phải cung cấp hành vi cho phạm vi.

Các hành vi được thêm vào các đối tượng phạm vi để phản ứng với các sự kiện cụ thể có thể được Kích hoạt bởi Chế độ xem. Sau khi hành vi được xác định trong bộ điều khiển, chế độ xem có thể được truy cập.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Guru99

Guru99 Global Event


{{fullName("Guru","99")}}

Giải thích mã:

  1. Chúng tôi đang tạo một hành vi có tên là "fullName". Hành vi này là một hàm chấp nhận 2 tham số (firstName, lastname).
  2. Sau đó, hành vi trả về sự nối của 2 tham số này.
  3. Trong khung nhìn, chúng tôi đang gọi hành vi và truyền vào 2 giá trị "Guru" và "99" được truyền dưới dạng tham số cho hành vi.

Nếu lệnh được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Trong trình duyệt, bạn sẽ thấy kết hợp của cả hai giá trị Guru & 99 đã được chuyển cho hành vi trong bộ điều khiển.

Tóm lược

  • Các biến thành viên khác nhau có thể được thêm vào đối tượng phạm vi mà sau đó có thể được tham chiếu trong khung nhìn.
  • Hành vi có thể được thêm vào để làm việc với các sự kiện được tạo cho các hành động do người dùng thực hiện.
  • Angjs $rootScopelà phạm vi cho toàn bộ ứng dụng. Một ứng dụng chỉ có thể có một $ rootScope và được sử dụng giống như một biến toàn cục. Trong Angular JS $ phạm vi là phạm vi con và $ rootScope là phạm vi cha