推迟控制器渲染 [英] Defer controller rendering

问题描述

我有一个AngularJS应用通过AJAX和许可用户从PHP获取数据通过几个步骤来编辑它。

I have an AngularJS app which grab data from PHP via AJAX and permit user to edit it through few steps.

应用程序的结构非常简单：

Structure of the app is very simple :

我是从加载主控制器 NG-控制器指令。

I have a main controller which is loaded from ng-controller directive.

<div ng-controller="MainCtrl">
    <!-- All my app take place here, -->
    <!-- so all my others controllers are in MainCtrl scope -->
    <div ng-view></div>
</div>

我有一个控制器通过编辑步骤（例如一般信息，策划者，验证等）。每个控制器被加载的 $ routeProvider （内MainCtrl范围内）。

I have one controller by editing steps (ex. general info, planner, validation, etc.). Each controller is loaded by the $routeProvider (inside MainCtrl scope).

我的问题是，当我加载（或刷新）页面， MainCtrl 使一个AJAX请求检索数据进行编辑。附 $ routeProvider 控制器AJAX请求完成之前加载，所以我不能使用由 MainCtrl 抢下数据

My problem is when I load (or refresh) the page, MainCtrl make an AJAX request to retrieve data to edit. The controller attached to $routeProvider is loaded before AJAX request is finished, so I can't use data grabbed by MainCtrl.

我要推迟$ routeProvider加载路径，而AJAX请求没有结束。我想我必须使用 $ Q 供应商，但我不能prevent航线装载。

I want to defer $routeProvider loading route while AJAX request is not ended. I think I have to use the $q provider, but I can't prevent route loading.

我已经试过这（在 MainCtrl ）和控制器仍然呈现premature：

I have tried this (in MainCtrl) and controller is still rendered premature :

$scope.$on('$routeChangeStart', function(event, current, previous) {
    $scope.pathLoaded.promise.then(function() {
        // Data loaded => render controller
        return true;
    });

    // Stop controller rendering
    return false;
});

和AJAX调用的定义是这样的：

And AJAX call is defined like this :

$scope.pathLoaded = $q.defer();
// Edit existing path
$http.get(Routing.generate('innova_path_get_path', {id: EditorApp.pathId}))
     .success(function (data) {
         $scope.path = data;

         $scope.pathLoaded.resolve();
     })
     .error(function(data, status) {
         // TODO
     });

所以，问题是：这是好办法来实现这一目标？如果是，我怎么能推迟控制器渲染？

So the question is : is it the good way to achieve this ? And if yes, how can I defer controller rendering ?

感谢您的帮助。

推荐答案

您可以使用解决路线属性，执行AJAX存在，并将结果传递到控制器。在路由定义：

You can use the resolve property of routes, execute the AJAX there and pass the result to your controller. In the route definition:

$routeProvider.when("path", {
    controller: ["$scope", "mydata", MyPathCtrl], // NOTE THE NAME: mydata
    templateUrl: "...",
    resolve: {
        mydata: ["$http", function($http) { // NOTE THE NAME: mydata
            // $http.get() returns a promise, so it is OK for this usage
            return $http.get(...your code...);
        }]
        // You can also use a service name instead of a function, see docs
    },
    ...
});

请参阅文档了解更多详情。对于给定的路径，控制器将不会在决心对象都解决所有成员之前调用。

See docs for more details. The controller for the given path will not be called before all members in the resolve object are resolved.

这篇关于推迟控制器渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！