延迟控制器渲染答案

【问题标题】：Defer controller rendering延迟控制器渲染
【发布时间】：2013-10-04 11:31:45
【问题描述】：

我有一个 AngularJS 应用程序，它通过 AJAX 从 PHP 获取数据并允许用户通过几个步骤对其进行编辑。

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

我有一个从ng-controller 指令加载的主控制器。

<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 范围内）加载。

我的问题是当我加载（或刷新）页面时，MainCtrl 发出 AJAX 请求以检索要编辑的数据。 $routeProvider的控制器是在AJAX请求完成之前加载的，所以我不能使用MainCtrl抓取的数据。

我想在 AJAX 请求未结束时推迟 $routeProvider 加载路由。我想我必须使用$q 提供程序，但我无法阻止路由加载。

我已经尝试过这个（在MainCtrl）并且控制器仍然过早呈现：

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

    // Stop controller rendering
    return false;
});

AJAX 调用是这样定义的：

$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
     });

所以问题是：这是实现这一目标的好方法吗？如果是，我该如何推迟控制器渲染？

感谢您的帮助。

【问题讨论】：

标签： javascript ajax angularjs

【解决方案1】：

您可以使用路由的resolve 属性，在那里执行AJAX 并将结果传递给您的控制器。在路由定义中：

$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
    },
    ...
});

请参阅docs 了解更多详情。在解析resolve 对象中的所有成员之前，不会调用给定路径的控制器。

【讨论】：