Ở các bài trước, mình có loáng thoáng nhắc đến về khái niệm scope. Bài viết hôm nay mình sẽ giới thiệu đến các bạn về Scope trong AngularJs và cách thức hoạt động của nó.

1. Scope trong AngularJs là gì ?

Scope (biến phạm vi $scope) là một đối tượng trung gian mà thông qua nó các thuộc tính hay phương thức bên trong Controller được truyền tải ra ngoài View. Chính vì thế chỉ có những thuộc tính và phương thức sử dụng $scope mới có thể tương tác với lớp View của một ứng dụng AngularJs.

Một ví dụ dễ hiểu đó là các bạn hãy tưởng tượng $scope là một chiếc xe vận chuyển, lớp Controller là người quản lý nhà kho, còn View là nơi nhận hàng. Người quản lý nhà kho sẽ thực hiện việc chuyển giao hàng hóa tới nơi nhận hàng thì phải thông qua chiếc xe vận chuyển. Và trong ứng dụng AngularJs cũng vậy, $scope như một chiếc xe tải vận chuyển các phương thức, thuộc tính bên trong Controller và gửi các thuộc tính, phương thức này ra bên ngoài View.

2. Ví dụ Scope trong AngularJs

Nào, bây giờ chúng ta sẽ đi từng ví dụ một để hiểu rõ hơn về $scope nhé.

Ví dụ a :

Mình sẽ tạo 1 file js đặt tên là scope.js có nội dung như sau :

Ở đoạn code trên, mình đã đưa giá trị “Kungfu PHP” vào biến phạm vi $scope.myname. Thông qua biến phạm vi này, mình biết chắc rằng mình sẽ có toàn quyền sử dụng giá trị “Kungfu PHP” bên ngoài View mà không gặp phải bất kỳ một trở ngại nào.

Để kiểm chứng điều này, mình sẽ tục tạo 1 file html đặt tên là scope.html. File này sẽ có nội dung như sau :

Khi chạy đoạn code trên sẽ xuất ra màng hình dòng chữ : “Xin chào tên của tôi là Kungfu PHP”. Điều này đồng nghĩa bên ngoài View chúng ta đã sử dụng giá trị “Kungfu PHP” của biến my_name thông qua biến phạm vi $scope trong AngularJs.

Ví dụ b :

Mình sẽ tạo 1 file js đặt tên là scope1.js. File này sẽ có nội dung như sau :

Ở đoạn code trên, chúng ta có biến username mang giá trị ‘World’ và function sayHello có nhiệm vụ gán giá trị  ‘Hello ‘ + $scope.username + ‘!’ vào biến greeting. Tất cả các biến này đều được gắn vào biến phạm vi $scope để có thể sử dụng bên ngoài View.

Tiếp đến, mình sẽ tạo 1 file html đặt tên là scope1.html có nội dung như sau :

Chạy file trên và click vào nút Say Hello nào, các bạn sẽ thấy dòng chữ “Hello World” được xuất ra ngoài trình duyệt.

3. Tổng kết :

Kết thúc bài viết hôm nay, chúng ta đã hiểu rõ hơn về khái niệm Scope trong AngularJs và cách thức vận hành của nó. Scope trong AngularJs đóng một vai trò vô cùng quan trọng, trong xuyên suốt quá trình làm dự án liên quan tới AngularJs, các bạn sẽ thấy rằng không thể thiếu $scope trong bất kỳ một đoạn code nào. Chúc các bạn học tốt !

Nguồn : kungfuphp.com

 

 

 


Nếu bạn thấy bài viết có ích và muốn cảm ơn mình thì bạn có thể donate mời mình 1 lý cà phê nhé
Địa chỉ ví BTC của mình : 1NWVkBYnd5iSZ5BsAg4fbr4bYWC7hn9Vcz
Cám ơn và chúc bạn nhiều niềm vui trong cuộc sống !