AngularJS 1.5 - Eigenschaft der untergeordneten Komponenten Iterieren und festlegen

Question

Ich habe eine übergeordnete Komponente, die "n" untergeordnete Komponenten innerhalb einer ng-Wiederholung erstellt. Jede untergeordnete Komponente hat in ihrer Vorlage ein Akkordeon-Element (aus ui-bootstrap-Direktiven).
Von der übergeordneten Komponente möchte ich alle Akkordeons mithilfe einer Verknüpfung in der übergeordneten Komponentenebene reduzieren oder erweitern. Jedes Kind-Akkordeon kann einzeln erweitert/reduziert werden, indem die lokale vm.isAccordionExpanded Variable eingestellt wird.

Ich plane, $scope.$broadcast() Formular der Eltern zu verwenden, um die Kinder zu benachrichtigen, jeder von ihnen wird die Ereignisse mit $scope.$on() abfangen und eine lokale boolesche Variable vm.isAccordionExpanded setzen, um das Akkordeon zu öffnen/zu schließen.

Geordnete Komponente Vorlage:

<span id="accordionListCommands" ng-if="vm.pastVisits.totalResults > 0"> 
    <span id="collapseAllAccordion"> 
     <a ng-click="vm.collapseAll()" href=""> 
      <i class="fa fa-minus-square" aria-hidden="true"></i></a> 
    </span> 
    <span id="expandAllAccordion"> 
     <a ng-click="vm.expandAll()" href=""> 
      <i class="fa fa-plus-square" aria-hidden="true"></i></a> 
    </span> 
</span> 

<div ng-repeat="visitItem in vm.pastVisits.data"> 
    <visits-list-component visit="visitItem"></visits-list-component> 
</div> 

Geordnete Komponente js-Datei:

$scope.$on('collapse-all-accordion', function() { 
    vm.isAccordionExpanded = false; 
}); 

$scope.$on('expand-all-accordion', function() { 
    vm.isAccordionExpanded = true; 
}); 

Vorlage Kind:

<uib-accordion close-others="false"> 
    <div uib-accordion-group is-open="vm.isAccordionExpanded"> 

//Rest of the template 

Gibt es einen besseren oder mehr performant Weg, dies zu erreichen?

Answer 1

Die Art, wie Sie dies tun, ist nicht richtig und es ist nicht der eckige Weg, es zu schreiben. Statt eine Möglichkeit, die Datenbindung oder Zweiweg-Daten binging verwenden:

bindings: { 
    visit: '<' // or ('=') respectivly 
} 

und dann CollapseAll Funktion implementieren wie folgt:

angular.forEach(vm.pastVisits.data,function(visitItem) { 
    visitItem.isAccordionExpanded = false; 
}); 

dann in der Besuch Komponente können Sie schreiben:

vm.$onChanges = function() { 
if(changes.visit) { 
    vm.isAccordionExpanded = changes.visit.currentValue.isAccordionExpanded; 
} 

} 

oder noch besser ohne $ onChanges Listener setzen:

<uib-accordion close-others="false"> 
<div uib-accordion-group is-open="vm.visit.isAccordionExpanded">