使用 resolve 和 $resource 在 Angular.js 中为控制器加载数据

Question

我正在尝试通过 Id 从 API 加载作业并将其传递给控制器​​。

.when('/jobs/edit/:id', {
    templateUrl: 'partials/jobs/edit',
    controller: 'JobCtrl',
    resolve: function($routeParams, Job){
        var jobId = $routeParams.id;

        return {
            job: function(){
                return Job.get({ id: jobId});
            }
        };
    }
})

控制器：

angular.module('App')
  .controller('JobCtrl', function ($scope, Job, $location, $routeParams) {
        $scope.newJob = data.job; //does not work
        $scope.errors = {};

        $scope.save = function (form) {
                   //...
        };
    });

型号：

angular.module('App')
    .factory('Job', function ($resource) {
        return $resource('/api/jobs/:id', {
            id: '@id'
        }, { //parameters default
            update: {
                method: 'PUT'
            }
        });
    });

如何获取控制器中的数据？我在路由中的resolve 块甚至没有被执行。

编辑：此页面有很多不同类型的解析示例： http://phillippuleo.com/articles/angularjs-timing-multiple-resource-resolves-ngroute-and-ui-router

Answer 1

您的解决方案似乎不正确。
您可以尝试更改路由器，例如：

.when('/jobs/edit/:id', {
  templateUrl: 'partials/jobs/edit',
  controller: 'JobCtrl',
  resolve: {
    job: function (Job, $routeParams) {
      return Job.get({id: $routeParams.id});
    }
  }
})

并通过将Job 包含在依赖项中来获取控制器中解析的数据：

angular.module('App')
  .controller('JobCtrl', function ($scope, job, $location, $routeParams) {
    // job is resolved here
    $scope.job = job;
    $scope.newJob = {};
    $scope.errors = {};

    $scope.save = function (form) {
               //...
    };
  });

更新
如果您想使用JobCtrl 进行创建和编辑，您可以在解析后的job 中返回null 以获得新作业页面。这意味着：在您创建之前，还没有任何工作。

.when('/jobs/new', {
  templateUrl: 'partials/jobs/new',
  controller: 'JobCtrl',
  resolve: {
    job: function () {
      return null;
    }
  }
})