Question

我有一个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
     });

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

感谢您的帮助。

Answer 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对象中的所有成员之前，不会调用给定路径的控制器。

延迟控制器渲染

1 个答案: