Question

我实现了一个角度指令，负责扩展和折叠页面上的一组块。该指令期望一组＆＃34;可扩展项目＃34;作为参数，所有项目都应具有属性isExpanded。

<expand-collapse-all expandable-items="expandableItems"></expand-collapse-all>

应该展开和折叠的块看起来像这样：

<ul>
    <li ng-repeat="group in groups">
        <block items="group.items" library="group.library"></block>
    </li>
</ul>

expandableItems数组形成如下：

_.forEach(groups, group => {
     expandableItems.push(group.library);
});

问题是我的expandableItems应该＆＃34;计算＆＃34;数组，因为isExpanded是库的属性，而不是组，并且可以添加或删除组，并且我不希望每次添加某个组时手动更新expandableItems数组或除去。

我看到我的问题可以通过使组对象可扩展（向其添加isExpanded属性）并将整个组传递给块指令而不是分别传递项和库来解决。但我仍然很好奇它是如何解决的，就像它现在一样。

我更喜欢使用knockoutjs，我知道在敲门声中，通过将expandableItems定义为ko.computed可以轻松实现。虽然我怎么能在angularjs中做类似的事情，但我无法弄明白。我可以以某种方式将函数传递给expand-collapse-all，这将重新计算expandableItems数组吗？

我试过这样做：

<expand-collapse-all expandable-items="getExpandableItems(groups)"></expand-collapse-all>

，在页面控制器的构造函数中定义getExpandableItems(groups)，但是我得到错误＆＃34;错误：10 $ digest（）迭代达到了。中止＆＃34; <！/ em>的

Answer 1

您需要缓存计算出的数组。每次都不能返回一个新的数组实例，因为Angular正在检查引用相等性，并且失败的检查会导致新的摘要循环。

Angularjs中的计算数组

1 个答案: