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

Question

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

我计划使用 $scope.$broadcast() 形成父级来通知子级，每个子级都会使用 $scope.$on() 拦截事件并设置本地 bool 变量 vm.isAccordionExpanded 分别打开/关闭 Accordion 。

父组件模板:

<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

您这样做的方式不正确，也不是 Angular 编写方式。 而是使用一种方式数据绑定(bind)或两种方式数据绑定(bind):

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