Komunikowanie zdarzeń z rodzica na dziecko w komponentach AngularJS

Komunikowanie zdarzeń z rodzica na dziecko w komponentach AngularJS

Opublikuj dyrektywę $API używając wiązania wyrażeń

Aby umożliwić komponentom nadrzędnym przekazywanie zdarzeń do komponentu podrzędnego, poproś, aby dziecko opublikowało API:

<grid-component grid-on-init="$ctrl.gridApi=$API; $ctrl.someFn($API)">
</grid-component>    

JS

app.component('gridComponent', {
  //Create API binding
  bindings: {gridOnInit: "&"},
  template: `
    <h4>Grid component</h4>
    <p> Save count = {{$ctrl.count}}</p>
  `,
  controller: function() {
    var ctrl = this;
    this.$onInit = function() {
        ctrl.count = 0;
        ctrl.api = {};
        //Publish save function
        ctrl.api.save = save;
        //Invoke Expression with $API as local
        ctrl.gridOnInit({$API: ctrl.api});
    };
    function save(){
      console.log("saved!");
      ctrl.count++;
    }
  }
});

Powyższy przykład wywołuje wyrażenie kątowe zdefiniowane przez atrybut grid-on-init z jego API wystawionym jako $API. Zaletą tego podejścia jest to, że rodzic może reagować na inicjalizację dziecka przez przekazanie funkcji komponentowi potomnemu z wyrażeniem kątowym.

From the Docs:

'isolate' Scope object hash definiuje zestaw właściwości lokalnego zakresu wywodzących się z atrybutów elementu dyrektywy. Te lokalne właściwości są przydatne do aliasowania wartości dla szablonów. Klucze w obiekcie hash mapują nazwę właściwości na izolowanym obszarze; wartości określają, w jaki sposób właściwość jest powiązana z obszarem nadrzędnym, poprzez dopasowanie atrybutów na element dyrektywy:

• & lub &attr - zapewnia sposób wykonania wyrażenia w kontekście zakresu nadrzędnego. Jeśli nie podano nazwy attr, zakłada się, że nazwa atrybutu jest taka sama jak nazwa lokalna. Biorąc pod uwagę <my-component my-attr="count = count + value"> i definicję zakresu izolowanego scope scope: { localFn:'&myAttr' }, właściwość zakresu izolowanego localFn wskaże wrapper funkcji dla count = count + value expression. Często pożądane jest przekazywanie danych z izolowanego zakresu za pomocą wyrażenia do zakresu nadrzędnego. Można to zrobić poprzez przekazanie mapy nazw i wartości lokalnych zmiennych do opakowania wyrażenia fn. Na przykład, jeśli wyrażenie jest increment($amount), to możemy określić wartość amount przez wywołanie localFn jako localFn({$amount: 22}).

-- AngularJS Comprehensive Directive API -- scope

Jako konwencję zalecam prefiksowanie zmiennych lokalnych za pomocą $, aby odróżnić je od zmiennych nadrzędnych.

Naprzemiennie używaj wiązania dwukierunkowego

Uwaga: do ułatwiają przejście na kąt 2+, unikają stosowania wiązań dwukierunkowych =. Zamiast tego użyj wiązania jednokierunkowego < i wiązania wyrażeń &. Aby uzyskać więcej informacji, zobacz AngularJS Developer Guide-Understanding Components.

Aby umożliwić komponentom nadrzędnym przekazywanie zdarzeń do komponentu podrzędnego, poproś, aby dziecko opublikowało API:

<grid-component api="$ctrl.gridApi"></grid-component>

W powyższym przykładzie, grid-component używa wiązań do publikowania swojego API w zakresie nadrzędnym za pomocą api atrybut.

app.component('gridComponent', {
  //Create API binding
  bindings: {api: "="},
  template: `
    <h4>Grid component</h4>
    <p> Save count = {{$ctrl.count}}</p>
  `,
  controller: function() {
    var ctrl = this;
    this.$onInit = function() {
        ctrl.count = 0;
        ctrl.api = {};
        //Publish save function
        ctrl.api.save = save;
    };
    function save(){
      console.log("saved!");
      ctrl.count++;
    }
  }
});

Komponent macierzysty może wywołać funkcję potomka save za pomocą opublikowanego API:

ctrl.click = function(){
  console.log("Search clicked");
  ctrl.gridApi.save();
}

DEMO na PLNKR.