Question

我正在使用AngularJS和Angular Bootstrap创建一个Web应用程序。我使用模态允许用户选择列表中的许多项之一。该列表使用ng-repeat进行渲染。

在某些移动平台上，用户按下启动模态的按钮和模态最终出现的时间之间会有相当长的延迟（3-5秒）。我不确定等待是否是由Angular在模态显示之前渲染该模态的DOM，或者仅仅是模态中的大量内容引起的。它可能都是。当我删除ng-repeat列表时，模态立即加载。

我需要做以下其中一项：

（1）导致Angular在模态显示后构建DOM。它并不理想，但至少显示模态会让用户知道他们的触摸已经注册，并且正在发生一些事情。

（2）尽管内容量很大，但模式显示得更快。

有关如何使其中任何一种发生的任何想法？

Answer 1

模态实例有一个属性rendered，它是一个在渲染模态时解析的promise。您可以延迟将大型数据集分配给模态范围，直到该承诺得到解决。

$uibModal.open({
    controller: function ($uibModalInstance, $scope, data) {
        $uibModalInstance.rendered.then(function () {
            $scope.data = data;
        });
    },
    ...
});

https://angular-ui.github.io/bootstrap/#/modal

但在我看来，模态不应该用于大型内容块。

如何在Angular app中加速模态的显示？

1 个答案: