Question

我有一个时间轴组件，在该组件中，我重复了多个对象（项目）。这些项目中的每一个都有多个子项目，这些子项目通过ng-include加载模板，其中一些子项目中包含ng-repeat。

在时间轴上，当用户单击某个项目时，我会加载ng-include并因此加载ng-repeats。然后完成一些api调用，并将内容呈现在DOM中。这大约需要250-750毫秒，具体取决于一个项目中有多少个子项目。

我想为折叠的物体设置动画，以获得流畅的体验。但是我必须等待DOM渲染才能通过遍历每个子项目来计算项目的折叠高度。

所以我必须等待ng-include加载或等待ng-repeat渲染。

所以我可以做的是在每个子项目的ng-include中添加onload="vm.ngIncludeComplete()"。如果项目具有多个子项目，则会出现多次被触发的问题，这也是我仍然必须使用setTimeout的问题，因为我必须等待ng-include中的ng-repeats完成。

另一种解决方案是进入模板，并将on-finish-render="vm.finishedRendering()"添加到ng-repeat中：

link (scope, element, attr) {
    if (scope.$last === true) {
        scope.$evalAsync(attr.onFinishRender);
    }
}

这将调用最低级别的函数（子项目中的ng-repeat），因此我不必执行setTimeout，但子项目中的每个模板都没有ng-repeat和一些模板有多个ng-repeats，所以我仍然会多次调用该函数。

是的，这些函数执行$broadcast：

this.$rootScope.$broadcast('startRenderDom');

还有其他选择吗？

Answer 1

不确定这是否是正确的方法，但似乎可行。

public ngIncludeComplete() {
    this.i += 1;
    if (this.i === this.activities.items.length) {
        this.$rootScope.$broadcast('eventBroadcastedName');
    }
}

每次模板加载完成时都会调用此函数。我知道一个项目（活动）中有多少个子项目，因此我可以将增量循环变量与子项目的长度进行比较。一旦相等，它将执行$broadcast，因此仅触发一次。

我不确定100％是否还能解决模板内的ng-repeat项需要setTimeout的问题。初步测试似乎还可以。

检查嵌套的包含/重复是否完成

1 个答案: