0

我的 Angular 应用程序有父子路由。我正在使用（ui-router）我构建父路由数据（使用 $resource 从服务器检索）传递给它的子路由。

这将是我的应用程序代码。当我调试我的代码时，子路由中的“phaseTasks”总是为空数组。

flowAdminApp.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider){

    $stateProvider
      .state('phase', {
        url: "/phases/:phase_id",
        template: JST['layouts/admin/flows/tasks/index'],
        resolve: {
          phaseTasks: ['$stateParams', 'taskData',
            function( $stateParams, taskData ){
              return taskData.getPhaseTasks($stateParams.phase_id);
          }]
        },
        controller: 'taskListController'
      })
      .state('phase.task', {
        url: "/tasks/:task_id",
        template: JST['layouts/admin/flows/tasks/show'],
        resolve: {
          task: ['$stateParams', 'phaseTasks',
            function( $stateParams, phaseTasks ){

              // phaseTasks is empty Array

          }]
        },
        controller: 'taskController'
      })
}]);

flowAdminApp.factory('taskData', [ '$resource',
  function ($resource) {
    return {
      getPhaseTasks: function (phase_id) {
        return $resource('/admin/tasks.json?phase_id=:phase_id', {phase_id:'@phase_id'}).query({phase_id:phase_id});
      }
    }
}]);

当我更改父数据是静态的代码时，“phaseTasks”正确传递给子路由。

flowAdminApp.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider){

$stateProvider
  .state('phase', {
    url: "/phases/:phase_id",
    template: JST['layouts/admin/flows/tasks/index'],
    resolve: {
      phaseTasks: ['$stateParams',
        function( $stateParams ){
          return [{a: 1}]
      }]
    },
    controller: 'taskListController'
  })
  .state('phase.task', {
    url: "/tasks/:task_id",
    template: JST['layouts/admin/flows/tasks/show'],
    resolve: {
      task: ['$stateParams', 'phaseTasks',
        function( $stateParams, phaseTasks ){

          // phaseTasks is [{a: 1}] 


      }]
    },
    controller: 'taskController'
  })
}]);

如何将数据（从服务器检索）从父路由传递到其子路由或防止子路由加载，直到从数据库中检索父路由数据？

4

1 回答 1

0

尝试getPhaseTasks使用承诺来实现您的服务方法

flowAdminApp.factory('taskData', [ '$resource','$q'
  function ($resource,$q) {
    return {
      getPhaseTasks: function (phase_id) {
        var defer = $q.defer();
        $resource('/admin/tasks.json?phase_id=:phase_id', {phase_id:'@phase_id'})
         .query({phase_id:phase_id},
            function(data){
                defer.resolve(data);
             },
            function(error) {
                defer.reject(error);
            });
        return defer.promise;
      }
    }
}]);

我认为目前的问题是$resourceapi 本质上是异步的，并返回一个数组，该数组在将来会被填充。由于您的路线没有可用的承诺，$state因此解析功能不会等待。

于 2013-09-21T13:54:02.107 回答