如何prevent屏幕闪烁AngularJs？ [英] How to prevent screen flickering with AngularJs?

问题描述

我已经从数据库中读取其数据的多个指令。在一种情况下，我在一个屏幕上的所有指令。这意味着，当屏幕被加载每个下拉/场逐一填写：首先你看场A为字段，然后场B获取的他的价值，那么场C，等等，等等，我不想这样，我想所有的数据被一次显示。

我怎样才能做到这一点？

下面是一个指令的一个例子。我有这些指令的10个左右。

  app.directive（environmentDropdown，['EnvironmentService'，函数（EnvironmentService）{
    返回{
        限制：'E'，
        模板：'＆LT;选择类=表格控数据-NG选项=e.Id作为e.Name为电子商务的环境中＆GT;＆LT; /选择＆GT;，
        范围： {
        }，
        更换：真实，
        链接：功能（范围，元素，属性）{
            EnvironmentService.getEnvironments（）。然后（功能（响应）{
                scope.environments =响应;
            }）;
        }
    }
}]）
 

解决方案

为了这个目的，我使用的纳克披风

这使得元素，之后您将标签看不见，直到整个页面加载

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?

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;
            });
        }
    }
}])

解决方案

For that purpose I am using ng Cloak

It makes the elements, after which you place the tag invisible until the whole page is loaded

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