AngularJS 1.5 - 迭代和设置子组件的属性

Question

我有一个父组件，它在 ng-repeat 中创建“n”个子组件。每个子组件在其模板中都有一个手风琴元素（来自 ui-bootstrap 指令）。
从父组件我想使用父组件级别中的链接折叠或展开所有手风琴。每个子手风琴都可以单独展开/折叠，设置本地 vm.isAccordionExpanded 变量。

我打算用$scope.$broadcast()从父母那里通知孩子，他们每个人都会用$scope.$on()拦截事件并设置一个本地布尔变量vm.isAccordionExpanded来分别打开/关闭手风琴。

父组件模板：

<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>

父组件js文件：

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

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

子模板：

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

//Rest of the template

有没有更好或更高效的方法来实现这一目标？

Answer 1

您这样做的方式不正确，也不是编写它的角度方式。 而是使用一种方式的数据绑定或两种方式的数据绑定：

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

然后像下面这样实现你的collapseAll函数：

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

那么在访问组件中可以写：

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

}

甚至更好，而不必放置 $onChanges 监听器：

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