15

我想延迟控制器的初始化,直到必要的数据从服务器到达。

我为 Angular 1.0.1 找到了这个解决方案:Delaying AngularJS route change until model loaded to prevent flicker,但无法让它与 Angular 1.1.0 一起使用

模板

<script type="text/ng-template" id="/editor-tpl.html">
Editor Template {{datasets}}
</script>
    <div ng-view>
</div>

​</p>

JavaScript

function MyCtrl($scope) {    
    $scope.datasets = "initial value";
}

MyCtrl.resolve = {
    datasets : function($q, $http, $location) {
        var deferred = $q.defer();

        //use setTimeout instead of $http.get to simulate waiting for reply from server
        setTimeout(function(){
            console.log("whatever");
            deferred.resolve("updated value");
        }, 2000);

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​

http://jsfiddle.net/dTJ9N/1/

4

3 回答 3

11

由于 $http 返回一个 Promise,创建自己的 deferred 只是为了在 http 数据到达时返回 Promise 会影响性能。你应该能够做到:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'});
    }
};

如果您需要对结果进行一些处理,请使用 .then,您的 Promise 将免费链接:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};
于 2012-09-11T14:14:49.373 回答
4

您总是可以将“ng-show”放在最外层的 DOM 元素上,并将其设置为等于您要等待的数据。

对于 Angular JS 主页上列出的示例,您可以看到它是多么容易:http://plnkr.co/CQu8QB94Ra687IK6KgHn 所要做的就是这样,在设置该值之前表单不会显示。

这种方式更直观,工作更少。

于 2013-01-17T17:35:28.067 回答
1

您可以在此处查看使用资源的几乎相同的问题,但它与 $http 的工作方式相同。我认为这应该有效

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets: function($http, $q) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
        }

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
于 2012-09-10T17:07:51.843 回答