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

Question

我有一个 parent 组件，它在 ng-repeat 中创建 "n" child 个组件。每个 child 组件在其模板中都有一个手风琴元素（来自 ui-bootstrap 指令）。
从 parent 组件我想使用 [= 折叠或展开所有手风琴43=] 在 parent 组件级别。每个 child 手风琴都可以 expanded/collapsed 单独设置本地 vm.isAccordionExpanded 变量。

我打算使用 parent 的 $scope.$broadcast() 来通知 children，他们每个人都会拦截 $scope.$on() 的事件并设置一个本地布尔变量 vm.isAccordionExpanded 到 open/close 手风琴。

Parent 组件模板：

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

Parent组件js文件：

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

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

Child 模板：

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

//Rest of the template

是否有更好或更高效的方法来实现这一点？

Answer 1

您这样做的方式不对，这不是 angular 的编写方式。而是使用一种方式的数据绑定或两种方式的数据绑定：

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 - 迭代并设置 child 个组件的属性

AngularJS 1.5 - Iterate and set child components' property

javascript

angularjs

angular-ui-bootstrap

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

AngularJS 1.5 - Iterate and set child components' property

javascript

angularjs

angular-ui-bootstrap

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