Javascript Angular.js 延迟控制器初始化

Angular.js delaying controller initialization

提问by mb21

I would like to delay the initialization of a controller until the necessary data has arrived from the server.

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

I found this solution for Angular 1.0.1: Delaying AngularJS route change until model loaded to prevent flicker, but couldn't get it working with Angular 1.1.0

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

Template

模板

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

?

?

JavaScript

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/

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

采纳答案by mdorman

Since $http returns a promise, it's a performance hit to create your own deferred just to return the promise when the http data arrives. You should be able to do:

由于 $http 返回一个承诺，因此创建自己的延迟只是为了在 http 数据到达时返回承诺会影响性能。你应该能够做到：

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

If you need to do some processing of the result, use .then, and your promise is chained in for free:

如果您需要对结果进行一些处理，请使用 .then，您的承诺将被免费链接：

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

回答by stormlifter

You could always just put "ng-show" on the outer-most DOM element and set it equal to the data you want to wait for.

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

For the example listed on the Angular JS home page you can see how easy it is: http://plnkr.co/CQu8QB94Ra687IK6KgHnAll that had to be done was That way the form won't show until that value has been set.

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

Much more intuitive and less work this way.

这种方式更直观，工作量更少。

回答by Justen

You can take a look at a near identical question herethat uses resources, but it works the same way with $http. I think this should work

您可以在此处查看使用资源的几乎相同的问题，但它与 $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
    });
});?