0

我有一个 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提供程序，但我无法阻止路由加载。

我已经尝试过这个（in 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
     });

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

感谢帮助。

4

1 回答 1

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

有关更多详细信息，请参阅文档。resolve在解析对象中的所有成员之前，不会调用给定路径的控制器。

于 2013-10-04T13:39:40.100 回答