Phạm vi trong AngularJS

Phạm vi $ trong AngularJS là một đối tượng dựng sẵn, chứa các phương thức và dữ liệu ứng dụng. Bạn có thể tạo thuộc tính cho một đối tượng $ scope bên trong một hàm bộ điều khiển và gán một giá trị hoặc chức năng cho nó.

Phạm vi $ là chất kết dính giữa bộ điều khiển và chế độ xem (HTML). Nó truyền dữ liệu từ bộ điều khiển để xem và ngược lại.

Phạm vi

Như chúng ta đã thấy trong phần controller, chúng ta có thể đính kèm các thuộc tính và phương thức vào đối tượng $ scope bên trong hàm controller. Chế độ xem có thể hiển thị dữ liệu $ scope bằng cách sử dụng chỉ thị biểu thức, ng-model hoặc ng-bind như được hiển thị bên dưới.

Ví dụ: $ scope

  
 & lt;! 
 
 DOCTYPE 
 
 html  
 & gt; 
 & lt; 
 
 html 
 
 & gt; 
 & lt; 
 
 head 
 
 & gt; 
    
 & lt; 
 
 title 
 
 & gt; 
 Đối tượng AngualrJS $ scope 
 & lt; / 
 
 title 
 
 & gt; 
    
 & lt; 
 
 script 
 
 src 
 
 = " ~ / Scripts / angle.js "
 
 & gt; & lt; / 
 
 script 
 
 & gt; 
 & lt; / 
 
 head 
 
 & gt; 
 & lt; 
 
 body 
 
 ng-app 
 
 = "myNgApp" 
 
 & gt; 
    
 & lt; 
 
 div 
 
 ng-controller 
 
 = "myController" 
 
 & gt; 
        Tin nhắn: 
 & lt; 
 
 br 
 
 / & gt; 
        {{message}} 
 & lt; 
 
 br 
 
 / & gt; 
        
 & lt; 
 
 span 
 
 ng-bind 
 
 = "nội dung" 
 
 & gt; & lt; / 
 
 span 
 
 & gt;  
 & lt; 
 
 br 
 
 / & gt; 
        
 & lt; 
 
 input 
 
 type 
 
 = " text "
 
 ng-model 
 
 =" message "
 
 / & gt; 
    
 & lt; / 
 
 div 
 
 & gt; 
    
 & lt; 
 
 script 
 
 & gt; 
        
 var 
 ngApp = angle.module (
 'myNgApp' 
, []);

        ngApp.controller (
 'myController' 
, 
 hàm 
 ($ scope) {
            $ scope.message = 
 "Xin chào Thế giới!" 
;
        });
    
 & lt; / 
 
 script 
 
 & gt; 
 & lt; / 
 
 body 
 
 & gt; 
 & lt; / 
 
 html 
 
 & gt; 
 

AngularJS tạo và đưa một đối tượng $ scope khác nhau vào từng bộ điều khiển trong một ứng dụng. Vì vậy, dữ liệu và phương thức gắn với $ scope bên trong một bộ điều khiển không thể được truy cập trong một bộ điều khiển khác. Với bộ điều khiển lồng nhau, bộ điều khiển con sẽ kế thừa đối tượng phạm vi của bộ điều khiển mẹ. Do đó, bộ điều khiển con có thể truy cập các thuộc tính được thêm vào trong bộ điều khiển mẹ nhưng bộ điều khiển mẹ không thể truy cập các thuộc tính được thêm vào bộ điều khiển con.

Lưu ý:

Chỉ thị ng-model được sử dụng để liên kết dữ liệu hai chiều. Nó chuyển dữ liệu từ bộ điều khiển sang chế độ xem và ngược lại. Một biểu thức và chỉ thị ng-bind truyền dữ liệu từ bộ điều khiển sang chế độ xem nhưng không phải ngược lại.

$ rootScope

Một ứng dụng AngularJS có một $ rootScope. Tất cả các đối tượng $ scope khác đều là đối tượng con.

Các thuộc tính và phương thức được đính kèm với $ rootScope sẽ có sẵn cho tất cả các bộ điều khiển.

Ví dụ sau minh họa đối tượng $ rootScope và $ scope.

Ví dụ: $ rootScope & amp; phạm vi $

  
 & lt;! 
 
 DOCTYPE 
 
 html  
 & gt; 
 & lt; 
 
 html 
 
 & gt; 
 & lt; 
 
 head 
 
 & gt; 
    
 & lt; 
 title 
 
 & gt; 
 Bộ điều khiển AngualrJS 
 & lt; / 
 
 title 
 
 & gt; 
    
 & lt; 
 
 script 
 
 src 
 
 = " ~ / Scripts / angle.js "
 
 & gt; & lt; / 
 
 script 
 
 & gt; 
 & lt; / 
 
 head 
 
 & gt; 
 & lt; 
 
 body 
 
 ng-app 
 
 = "myNgApp" 
 
 & gt; 
    
 & lt; 
 
 div 
 
 ng-controller 
 
 = "parentController" 
 
 & gt; 
        Tên bộ điều khiển: {{controllerName}} 
 & lt; 
 
 br 
 
 / & gt; 
        Tin nhắn: {{message}} 
 & lt; 
 
 br 
 
 / & gt; 
        
 & lt; 
 
 div 
 
 style 
 
 = " margin: 10px 0 10px 20px; "
 
 ng-controller 
 
 =" childController "
 
 & gt; 
            Tên bộ điều khiển: {{controllerName}} 
 & lt; 
 
 br 
 
 / & gt; 
            Tin nhắn: {{message}} 
 & lt; 
 
 br 
 
 / & gt; 
        
 & lt; / 
 
 div 
 
 & gt; 
    
 & lt; / 
 
 div 
 
 & gt; 
    
 & lt; 
 
 div 
 
 ng-controller 
 
 = "BrothersController" 
 
 & gt; 
        Tên bộ điều khiển: {{controllerName}} 
 & lt; 
 
 br 
 
 / & gt; 
        Tin nhắn: {{message}} 
 & lt; 
 
 br 
 
 / & gt; 
    
 & lt; / 
 
 div 
 
 & gt; 
    
 & lt; 
 
 script 
 
 & gt; 
        
 var 
 ngApp = angle.module (
 'myNgApp' 
, []);

        ngApp.controller (
 'parentController' 
, 
 function 
 ($ scope, $ rootScope) {
            $ scope.controllerName = 
 "parentController" 
;
            $ rootScope.message = 
 "Xin chào Thế giới!" 
;
        });

        ngApp.controller (
 'childController' 
, 
 function 
 ($ scope) {
            $ scope.controllerName = 
 "childController" 
;
        });

        ngApp.controller (
 'brotherController' 
, 
 function 
 ($ scope) {

        });
    
 & lt; / 
 
 script 
 
 & gt; 
 & lt; / 
 
 body 
 
 & gt; 
 & lt; / 
 
 html 
 
 & gt; 
  

Kết quả:

 
Tên bộ điều khiển: parentController
Thông điệp: Hello World!
    Tên bộ điều khiển: childController
    Thông điệp: Hello World!
Tên người điều khiển:
Thông điệp: Hello World!  

Theo ví dụ trên, các thuộc tính được thêm vào trong $ rootScope có sẵn trong tất cả các bộ điều khiển.

Đối tượng $ scope chứa nhiều phương thức khác nhau. Bảng sau liệt kê các phương thức quan trọng của đối tượng $ scope.

Phương pháp

Sự mô tả

$ mới ()

Tạo phạm vi con mới.

$ watch ()

Đăng ký một cuộc gọi lại để được thực thi bất cứ khi nào thuộc tính mô hình thay đổi.

$ watchGroup ()

Đăng ký một cuộc gọi lại để được thực thi bất cứ khi nào các thuộc tính của mô hình thay đổi. Tại đây, chỉ định một mảng thuộc tính cần theo dõi.

$ watchCollection ()

Đăng ký một lệnh gọi lại sẽ được thực thi bất cứ khi nào đối tượng mô hình hoặc thuộc tính mảng thay đổi.

$ thông báo ()

Xử lý tất cả những người theo dõi của phạm vi hiện tại và con của nó.

$ hủy ()

Loại bỏ phạm vi hiện tại (và tất cả các phạm vi con của nó) khỏi phạm vi chính.

$ eval ()

Thực thi biểu thức trên phạm vi hiện tại và trả về kết quả.

$ apply ()

Thực thi một biểu thức trong góc ngoài khung góc.

$ trên ()

Đăng ký một cuộc gọi lại cho một sự kiện.

$ release ()

Gửi sự kiện được chỉ định trở lên cho đến $ rootScope.

$ broadcast ()

Gửi sự kiện đã chỉ định xuống tất cả các phạm vi con.

$ watch

Đối tượng phạm vi góc bao gồm sự kiện $ watch sẽ được nâng lên bất cứ khi nào thuộc tính mô hình được thay đổi.

Ví dụ: $ watch ()

  
 & lt;! 
 
 DOCTYPE 
 
 html  
 & gt; 
 & lt; 
 
 html 
 
 & gt; 
 & lt; 
 
 head 
 
 & gt; 
    
 & lt; 
 
 script 
 
 src 
 
 = " ~ / Scripts / angle.js "
 
 & gt; & lt; / 
 
 script 
 
 & gt; 
 & lt; 
 / 
 head 
 & gt;
 & lt; 
 
 body 
 
 ng-app 
 = 
 "myNgApp" 
 & gt;
    
 & lt; 
 
 div 
 
 ng-controller 
 = 
 "myController" 
 & gt;
        Nhập Tin nhắn: & lt; 
 input 
 
 type 
 = 
 "text" 
 
 ng-model 
 = 
 "nội dung" 
 / & gt; & lt; br / & gt;
        Tin nhắn Mới: {{newMessage}} 
 & lt; 
 
 br / 
 
 & gt; 
        Tin nhắn cũ: {{oldMessage}}
    
 & lt; 
 / 
 div 
 
 & gt; 
    
 & lt; 
 
 script 
 
 & gt; 
        
 var 
 ngApp = angle.module (
 'myNgApp' 
, []);
    
        ngApp.controller (
 'myController' 
, 
 hàm 
 ($ scope) {
            $ scope.message = 
 "Xin chào Thế giới!" 
;

            $ scope. $ watch (
 'message' 
, 
 function 
 (newValue, oldValue) {
                $ scope.newMessage = newValue;
                $ scope.oldMessage = oldValue;
            });
        });
    
 & lt; / 
 
 script 
 
 & gt; 
 & lt; / 
 
 body 
 
 & gt; 
 & lt; / 
 
 html 
 
 & gt; 
 

Như bạn có thể thấy trong ví dụ trên, $ watch đăng ký một lệnh gọi lại, lệnh gọi này sẽ được gọi bất cứ khi nào “thông báo” thuộc tính mô hình được chỉ định thay đổi.