Javascript 如何使用AngularJs防止屏幕闪烁？

我有多个从数据库获取数据的指令。在一个例子中，我把所有指令都放在一个屏幕上。这意味着，当屏幕加载每个下拉列表/字段时，会逐个填充：首先，您看到字段A是字段，然后字段B得到他的值，然后字段C等等。我不希望这样，我希望所有数据都立即显示

我怎样才能做到这一点

下面是一个指令示例。我有大约10条这样的指令

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

app.directive（“environmentDropdown”，['EnvironmentService'，函数（EnvironmentService）{
返回{
限制：'E'，
模板：“”，
范围：{
},
替换：正确，
链接：功能（范围、元素、属性）{
EnvironmentService.getEnvironments（）.then（函数（响应）{
scope.environments=响应；
});
}
}
}])

为此，我使用

---

它会使元素变得不可见，然后放置标记，直到整个页面加载为止

因为您没有告诉我们指令如何检索数据，所以我假设您使用

$http

请求

您可以这样做：

  var promises = []
  for (var i = 0; i < requests.length; i++) {
    var req = requests[i];
    promises.push( $http.post(url, req) )
  }

  $q.all(promises)
    .then(function (data) {
      $scope.fields = data
    })

var承诺=[]
对于（var i=0；i

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

 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，其中包含数据

---

另请参见：

每个下拉列表都有多个后端调用吗？@Michael查看我的更新post@martijn你试过我给你的答案了吗？有用吗？恐怕我做不到。我用一个指令的例子更新了我的帖子。在我所有的指令中，我都在模板中添加了

ng-clope

。当加载我的页面时，我仍然看到所有的字段一个接一个地填充，而不是一次全部填充。你添加了吗！ng斗篷显示后的重要信息：无css规则？是的，我从文档中复制了css类，其中包括

！重要信息

零件。。