推遲控制器渲染

我有一個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獲取的數據。

我想推遲$ routeProvider加載路由，而AJAX請求沒有結束。我想我必須使用$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 
    });

所以，問題是：這是好的如何實現這一目標？如果是的話，我如何推遲控制器渲染？

感謝您的幫助。

來源

2013-10-04 Elorfin

您可以使用路由的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中的所有成員之前，不會調用給定路徑的控制器。

來源

2013-10-04 13:39:40

推遲控制器渲染

回答

相關問題