在 Angular.js 中的控制器之间共享未保存的 $resource答案

【问题标题】：Sharing unsaved $resource between controllers in Angular.js在 Angular.js 中的控制器之间共享未保存的 $resource
【发布时间】：2014-08-28 15:17:05
【问题描述】：

我有一个鼓励用户注册服务的主页。主页只有几个输入要填写。在新用户提交这些字段后，他们将被带到主注册页面以及其余所需的输入。我在填充主注册页面上已提供的输入时遇到问题。

我读过在模板之间传输数据的最佳方式（甚至不更改控制器）是使用服务。我正在使用服务，但它们是 $resource 服务，并且我无法弄清楚如何在模板之间保留未保存的 $resource。 我无法保存 $resource因为它还没有所有必需的信息。

路由 - 使用 angular-ui 路由器

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('welcome', {
      url: '/',
      templateUrl: 'views/welcome.html',
      controller: 'CompanyCtrl'
    })
    .state('registerAccount', {
      url: '/account/register',
      templateUrl: 'views/account/register.html',
      controller: 'CompanyCtrl'
    });
});

服务 - 公司和经理

angular.module('app')
  .factory('Company', ['$resource', function ($resource) {
    return $resource('http://localhost:3000/api/v1/company/');
  }]);

angular.module('app')
  .factory('Manager', ['$resource', function ($resource) {
    return $resource('http://localhost:3000/api/v1/managers');
  }]);

控制器

angular.module('app')
.controller('CompanyCtrl', ['Company', 'Manager',
  function (Company, Manager) {
    this.company = new Company();
    this.manager = new Manager();

    this.create = function() {
      var params = {
        company: this.company,
        manager: this.manager
      };

      Company.save(params);
    };
  } 
]);

【问题讨论】：

标签： javascript angularjs angular-ui-router angularjs-service angularjs-resource

【解决方案1】：

尝试创建一个服务来管理这个步骤

angular.module('app').factory('ServiceRegisterManager' ['$resource', 'Company', 'Manager', function($resource, Company, Manager){
    var steps: []
    return {

        saveTemporaryStep: function(step, data){
            steps[step] = data
        }

        someValidateion: function(){...}

        callMeOnFinalStep: function(){//Save your full data}
    }
}])

【讨论】：

我真的不想创建一个全新的工厂来跟踪其他应该已经持久化的工厂。有没有办法将这个概念融入现有的工厂？

【解决方案2】：

在this answer 的帮助下，我决定处理资源和持久性工厂的最佳方法是将资源分离到它们自己的 API 工厂中，释放我的模型工厂供我随意使用。

API 工厂

angular.module('app')

.factory('Api', ['$resource',
 function($resource) {
  return {
    Company: $resource('http://localhost:3000/api/v1/company/'),
    Manager: $resource('http://localhost:3000/api/v1/managers')
  };
}]);

没有 $resource 的经理和公司

angular.module('app')

.factory('Manager', function () {
  return {};
})


.factory('Company', function () {
  return {};
});

更新控制器

angular.module('app')

.controller('CompanyCtrl', ['Company', 'Manager', 'Api',
  function (Company, Manager, Api) {
    this.company = Company;
    this.manager = Manager;

    this.create = function() {
      var params = {
        company: this.company,
        manager: this.manager
      };

      Api.Company.save(params);
    };
  } 
]);

【讨论】：