如何使用 AngularJs 防止屏幕闪烁? [英] How to prevent screen flickering with AngularJs?

问题描述

我有多个从数据库中获取数据的指令.在一种情况下，我在一个屏幕中拥有所有指令.这意味着当屏幕加载时，每个下拉列表/字段都被一个一个填充:首先你看到字段 A 是字段，然后字段 B 得到他的值，然后字段 C 等等.我不想要这个，我想要一次显示所有数据.

I've multiple directives which fetch their data from the database. In one case I have all the directives in one screen. This means that when the screen is loading each dropdown/field is filled one by one: first you see field A being field, then field B get's his value, then field C, etc. etc. I don't want this, I want that all the data is displayed at once.

我怎样才能做到这一点?

How can I achieve this?

这是指令的一个示例.我有大约 10 个这样的指令.

Here is one example of a directive. I have about 10 of these directives.

app.directive("environmentDropdown", ['EnvironmentService', function (EnvironmentService) {
    return {
        restrict: 'E',
        template: '<select class="form-control" data-ng-options="e.Id as e.Name for e in environments"></select>',
        scope: {
        },
        replace:true,
        link: function (scope, element, attributes) {
            EnvironmentService.getEnvironments().then(function (response) {
                scope.environments = response;
            });
        }
    }
}])

推荐答案

您可以在加载视图之前获取所有数据:

You could fetch all data before the view is loaded:

 app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
        myData: function($q,$http){
            var deffered = $q.defer();

                // make your http request here 
                // store the result in a shared service

            return deffered.promise;
        }
    }}).
    otherwise({redirectTo: '/'});
}]);

myData 然后可以在需要的地方注入，包含数据.

myData could then be injected where needed, containing the data.

另见:AngularJS 应用初始化之前的 $http 请求?

这篇关于如何使用 AngularJs 防止屏幕闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！