2013-01-22 33 views
44

Tôi đã tìm ra nếu tôi tát ng-controller="GeneralInfoCtrl" trên nhiều phần tử trong DOM của mình, chúng sẽ chia sẻ cùng một $scope (hoặc ít nhất hai chiều không hoạt động). Lý do tôi muốn làm điều này là vì tôi có các chế độ xem chỉ đọc khác nhau với các hộp thoại phương thức được kết hợp ở các phần rất khác nhau của HTML và chúng không chia sẻ tổ tiên chung (ngoài số <body><html>).Sử dụng cùng một bộ điều khiển trên các phần tử khác nhau để chỉ cùng một đối tượng

Có cách nào để làm cho cả hai bộ điều khiển tham chiếu đến cùng một đối tượng/tạo liên kết dữ liệu giữa chúng?


Dưới đây là một số mã cho những người nhấn mạnh vào thấy đánh dấu, viết bằng Jade:

.client-box(ng-controller="GeneralInfoCtrl") 
     .box-header 
      .box-title 
       h5 General Information 
      .box-buttons 
       button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static') <i class="icon-pencil"></i> Edit 
     .box-body 
      table.table.table-tight.table-key-value 
       tr 
        th Name 
        td {{client.fullName()}} 
       tr 
        th Also Known As 
        td {{client.aka}} 
       tr 
        th Birth Date 
        td {{client.birthDate|date:'mediumDate'}} 
    ... 

#editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl") 
    .modal-header 
     button.close(type='button', data-dismiss='modal') &times; 
     h3 Edit General Information 
    .modal-body 
     form.form-horizontal.form-condensed 
      .control-group 
       label.control-label First Name 
       .controls 
        input(type='text', placeholder='First Name', ng-model='client.firstName') 
      .control-group 
       label.control-label Last Name 
       .controls 
        input(type='text', placeholder='Last Name', ng-model='client.lastName') 
      .control-group 
       label.control-label Also Known As 
       .controls 
        input(type='text', placeholder='AKA', ng-model='client.aka') 
      .control-group 
       label.control-label Birth Date 
       .controls 
        input(type='text', placeholder='MM/DD/YYYY', ng-model='client.birthDate') 
... 

Và điều khiển của tôi:

function GeneralInfoCtrl($scope) { 
    $scope.client = { 
     firstName: 'Charlie', 
     lastName: 'Brown', 
     birthDate: new Date(2009, 12, 15), 
     ... 
    } 
} 

Trả lời

13

Đơn giản chỉ cần đưa dữ liệu được chia sẻ trong phạm vi gốc, bạn sẽ có thể sử dụng chúng ở mọi nơi. Trong Angular $rootScope là gốc của tất cả phạm vi và có thể được sử dụng trong bộ điều khiển để quản lý dữ liệu phải hiển thị trên tất cả các mô-đun. Để sử dụng nó chỉ cần tiêm nó trong chức năng điều khiển. Để có giải thích chi tiết, hãy tham khảo Angular developer's guide và đến API doc.

+0

Cảm ơn bạn. Không thể tìm thấy đề cập đến '$ rootScope' trong hướng dẫn dành cho nhà phát triển, nhưng nó có trong API. Đây thực sự là cách tiếp cận tốt nhất? Tôi không cần truy cập trong "mô-đun" khác, chỉ trong bộ điều khiển này. – mpen

+0

Ngoài ra, giả sử rằng tôi muốn có nhiều khách hàng một trang và nhấp vào nút "chỉnh sửa" nhất định bên cạnh một trong số họ sẽ sử dụng bộ điều khiển/phạm vi cho ứng dụng khách đó thay vì toàn bộ/chia sẻ ... thì sao? Có lẽ tôi cần phải đọc thêm ... – mpen

+1

Bạn có thể có nhiều bộ điều khiển, mỗi bộ điều khiển có phạm vi riêng biệt, trong cùng một trang. Nếu nhu cầu chia sẻ dữ liệu của bạn không thường xuyên, bạn nên nghĩ đến việc sử dụng "dịch vụ". Đọc phần "Sử dụng bộ điều khiển chính xác" trong [hướng dẫn của nhà phát triển] (http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller). – remigio

76

Mỗi lần trình biên dịch Góc tìm thấy bộ điều khiển ng trong HTML, một phạm vi mới được tạo. (Nếu bạn sử dụng ng-view, mỗi khi bạn đi đến một con đường khác, một phạm vi mới cũng được tạo ra.)

Nếu bạn cần chia sẻ dữ liệu giữa các bộ điều khiển, thông thường dịch vụ là lựa chọn tốt nhất của bạn. Đưa dữ liệu được chia sẻ vào dịch vụ và đưa dịch vụ vào bộ điều khiển:

function GeneralInfoCtrl($scope, MyService) { 

Mỗi trường hợp/bộ điều khiển sẽ có thể truy cập dữ liệu được chia sẻ.

Lưu ý rằng các dịch vụ là đơn, vì vậy sẽ chỉ có một ví dụ về dữ liệu được chia sẻ của bạn xung quanh.

Dưới đây là fiddle (Tôi không viết nó) cho biết hai trình điều khiển có thể chia sẻ dữ liệu như thế nào.

Xem thêm AngularJS: How can I pass variables between controllers?
Angularjs: two way data bindings and controller reload.

Các vấn đề liên quan