Question

我的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'
  })
}]);

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

Answer 1

尝试使用承诺

实施您的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;
      }
    }
}]);

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

将数据（从服务器检索）从父路由传递到其子路由

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

1 个答案: