Question

我的页面加载并应用其中一个包含css链接中定义的CSS。我还有一个角度控制器，可以调用某些服务来获取一些数据。此数据还将应用css样式（通过角度），具体取决于它返回的数据类型。

问题在于，由于服务必须等待一瞬间左右才能操作页面上的样式，因此会出现延迟应用于页面样式的外观。

页面加载应用CSS ...等待数据从服务调用返回，然后应用更多样式。

有没有办法在应用页面上的任何样式之前等待数据返回，无论是来自css html链接还是角度指令，以避免此延迟/加载问题？

Answer 1

您可以在解决角度路线之前预先加载数据。

示例：

$routeProvider
                .when('/bar/foo/',
                {
                    templateUrl: '',
                    controller: Ctrl,
                    resolve: {
                        data: ['service', function (service) {
                              return service.function();
                          }
                        ],
                    }
                })

在控制器中注入'data'作为依赖项。在这种情况下，数据在呈现页面之前可用。

Answer 2

您的服务如何“应用更多样式”？是通过在DOM上附加链接标记吗？

您可以手动将所获得的不同样式存储在临时变量中，并在知道所有样式时全部应用它们。

另一个不错的选择是隐藏整个页面，例如使用一些徽标或进度条，或者只是一个纯白页面，直到所有样式都被应用为止。在您的顶级控制器中，在您的服务返回所有CSS后，将一些$scope.pageReady设置为true。同时，隐藏内容：

<div ng-show = "pageReady"> ... </div>

使用Angular Stylings加载CSS

2 个答案: