$Scope trong AngularJS là gì? Hướng dẫn sử dụng hàm (Ví dụ)
$scope trong AngularJS là gì?
$ phạm vi trong AngularJS là một đối tượng tích hợp về cơ bản liên kết “bộ điều khiển” và “chế độ xem”. 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('HelloWorldCtrl' function($scope) { $scope.message = "Hello World" });
Giải thích mã:
- Tên của mô-đun là “ứng dụng”
- Tên của bộ điều khiển là “HelloWorldCntrl”
- Đố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.
- Biến thành viên được thêm 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 tôi 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 hồi các sự kiện cụ thể có thể được Chế độ xem kích hoạt. Khi hành vi được xác định trong bộ điều khiển, nó có thể được truy cập bằng chế độ xem.
Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.
<!DOCTYPE html> <html lang="en"> <head> <meta chrset="UTF 8"> <title>Guru99</title> </head> <body ng-app="DemoApp"> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-controller="DemoController"> {{fullName("Guru","99")}} </div> <script type="text/javascript"> var app = angular.module("DemoApp", []); app.controller("DemoController", function($scope) { $scope.fullName=function(firstName,lastname){ return firstName + lastname; } } ); </script> </body> </html>
Giải thích mã:
- 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).
- Hành vi sau đó trả về kết nối của 2 tham số này.
- Theo quan điểm, 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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Trong trình duyệt, bạn sẽ thấy sự kết hợp của cả hai giá trị Guru & 99 đã được chuyển cho hành vi trong điều khiển.
Tổng kết
- Các biến thành viên khác nhau có thể được thêm vào đối tượng phạm vi, sau đó có thể được tham chiếu trong dạng xem.
- Hành vi có thể được thêm vào để hoạt động 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.
- AngularJS
$rootScope
là 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 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