Używanie tego samego kontrolera na różnych elementach do odnoszenia się do tego samego obiektu

Pomyślałem, że jeśli uderzę ng-controller="GeneralInfoCtrl" na wielu elementach w moim DOM, będą one miały ten sam $scope (lub najmniej dwukierunkowe wiązanie nie działa).Używanie tego samego kontrolera na różnych elementach do odnoszenia się do tego samego obiektu

Powodem, dla którego chcę to zrobić, jest to, że mam różne widoki tylko do odczytu z powiązanymi dialogami modalnymi w bardzo różnych częściach kodu HTML i nie mają one wspólnego przodka (oprócz <body> i <html>).

Czy istnieje sposób, aby oba kontrolery odnosiły się do tego samego obiektu/sprawiają, że praca z powiązaniem danych między nimi działa?

Oto niektóre kodu dla tych, którzy kładą nacisk na widzenie znaczników, napisany w 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') 
...

i mój Kontroler:

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

Źródło

2013-01-22 mpen

prostu umieścić współdzielone dane w zakres główny, będziesz mógł z nich korzystać wszędzie. W Angular $rootScope jest źródłem wszystkich zakresów i może być używany w kontrolerach do zarządzania danymi, które muszą być widoczne we wszystkich modułach. Aby go użyć wystarczy wprowadzić go do funkcji kontrolera. Aby uzyskać szczegółowe wyjaśnienie, zapoznaj się z Angular developer's guide i API doc.

Źródło

2013-01-22 07:16:50 remigio

Dziękuję. Nie można znaleźć wzmianki o '$ rootScope' w przewodniku dla programistów, ale jest w interfejsie API. Czy to naprawdę najlepsze podejście? Nie potrzebuję dostępu w innych "modułach", tylko w tym jednym kontrolerze. – mpen

Załóżmy także, że chciałbym mieć wielu klientów na jednej stronie, a kliknięcie przycisku "edytuj" obok jednego z nich użyłoby kontrolera/zakresu dla tego klienta, a nie dla globalnego/współdzielonego ... co wtedy? Być może potrzebuję trochę więcej czytania ... – mpen

Możesz mieć wiele kontrolerów, każdy z osobnym zasięgiem, na tej samej stronie. Jeśli twoja potrzeba udostępniania danych nie jest okazjonalna, powinieneś pomyśleć o używaniu "usług". Przeczytaj sekcję "Używanie kontrolerów poprawnie" w [Poradniku programisty] (http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller). – remigio

Za każdym razem, gdy kompilator Angular odnajduje kontroler ng w kodzie HTML, tworzony jest nowy zakres. (Jeśli używasz ng-view, za każdym razem, gdy jedziesz na inną trasę, tworzony jest również nowy zakres).

Jeśli chcesz udostępnić dane między kontrolerami, zazwyczaj najlepszą opcją jest usługa. Włóż udostępnione dane do usługi i wprowadź usługę do kontrolera:

function GeneralInfoCtrl($scope, MyService) {

Każda instancja zakresu/kontrolera będzie mogła uzyskać dostęp do udostępnionych danych.

Należy pamiętać, że usługi są pojedyncze, więc będzie tylko jedno wystąpienie udostępnionych danych.

Oto fiddle (nie napisałem tego) pokazujący, w jaki sposób dwa kontrolery mogą współużytkować dane.

Zobacz także AngularJS: How can I pass variables between controllers? i
Angularjs: two way data bindings and controller reload.

Źródło

2013-01-22 15:41:35

Używanie tego samego kontrolera na różnych elementach do odnoszenia się do tego samego obiektu

Odpowiedz

Powiązane problemy