Question

这可能是一个初学者问题，但我通过AngularJS中的http调用检索数据并将它们设置为$ scope变量中的属性。但是，由于http调用需要一段时间，因此我的页面会尝试多次加载AngularJS，以便在检索到更多数据时呈现页面的不同部分。有没有解决的办法？（在检索完所有数据之前推迟加载页面）

Answer 1

你可以做的是使用 ng-hide 或 ng-cloak ，以便在http调用完全加载数据之前不会显示的内容将保持隐藏状态

Answer 2

查看路线设置中的resolve属性。如果您设置要解决的问题，路由器将在转到控制器之前解决此问题。

app.config(function ($routeProvider) {
  $routeProvider
    .when('/',
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
      resolve: {
        app: function ($q, $timeout) {
          YourFactory.getData({});
        }
      }
    }
  )
});

然后创建一个可以获得所需数据的工厂

app.factory('YourFactory', ['$http', '$q',
    function($http, $q) {
        var url = '/api2.php/api';
        var YourFactory = {};
        var factory_data = [];
        var messages = [];

        YourFactory.getData = function(params) {
            console.log("into GET data");
            var deferred = $q.defer();

            $http.get(url).success(function(response) {
                angular.copy(factory_data, response.data);
                deferred.resolve();
            }).error(function(response) {
                //couldn't resolve therefore it's rejected
                deferred.reject();
            });

            //returns a promise that indicates that something is being resolved and will be returned for the app to continue
            return deferred.promise;
        };


        YourFactory.data = function() {
            return factory_data;
        };

        return YourFactory;
    }
]);

然后在您的控制器中，您需要输入工厂并从Factory设置范围数据。请记住，Angular使用Factory在控制器之前使用resolve属性获取数据。

 app.controller("AppCtrl", ['$scope','YourFactory',
    function($scope, YourFactory) {
        $scope.data = YourFactory.data();
 });

（我还没有对代码进行测试，我只是根据我正在做的应用程序编写了一个示例，其中我通过了与您相同的内容）

如果您有任何疑问，请查看此链接。

https://egghead.io/lessons/angularjs-resolve http://www.javierlerones.com/2013/07/preloading-data-using-deferred-promises-in-angular-js.html

有没有办法在检索所有AngularJS $范围数据之前阻止渲染AngularJS视图？

2 个答案: