Question

我有多个指令从数据库中获取数据。在一个案例中，我在一个屏幕中拥有所有指令。这意味着当屏幕加载时，每个下拉/字段逐个填充：首先你看到字段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;
            });
        }
    }
}])

Answer 1

为此目的，我正在使用ng Cloak

它生成元素，之后您将标记放置在整个页面加载之前不可见

Answer 2

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

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

另请参阅：$http request before AngularJS app initialises?

Answer 3

由于您没有告诉我们您的指令如何检索数据，我假设您使用$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
    })

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

3 个答案: