Question

我有一个父组件，可以在ng-repeat中创建“n”个子组件。每个子组件在其模板中都有一个accordion元素（来自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">

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

1 个答案: