javascript - 如何使用服务在 Angular Controller 之间持久保存对象实例？

Question

我正在尝试在 Angular 内部的多个 Controller 和指令之间传递“用户模型”实例。我的模型如下所示:

var userFactory = function (addressFactory) {
    var User = function () {
        BillingAddress = addressFactory.createAddress();
        ShippingAddress = addressFactory.createAddress();
        FirstName = '';
    }

    return {
        create: function(){return new User()}
    }
}


var userModel = function (userFactory) {

    var model = userFactory.create();

    return {
        model: model
    }
}
app.factory('addressFactory', ['securedHttp', 'utility', addressFactory]);
app.factory('userFactory', ['addressFactory', userFactory]);

userModel.model 将用于绑定(bind)到 Angular 表单，包括多个 Controller 。我希望所有 Controller 中的更改都能将其更改反射(reflect)回此实例。

我希望所有服务都能够引用此 userModel.model 并获取对该模型所做的最新更改。

 var MyController1 = function ($scope, userModel) {
   $scope.user = userModel;
   userModel.model.FirstName = "blahblah";

}
   var MyDirectiveController2 = function ($scope, userModel) {
        //EXPECT:
        userModel.model.FirstName == "blahblah";
}

var myOtherService = function(userModel){
//EXPECT:
userModel.model.FirstName == "blahblah";
}

这不起作用。据我了解，服务是单例的，但我无法更改模型上的数据并使其反射(reflect)在不同的上下文中。

关于正确的方法有什么建议吗？我可以共享作用域或将作用域变量传递给每个 Controller ，但这似乎是传递已作为服务存在的依赖项的一种有点困惑的方式。

Answer 1

我对你的代码有点困惑。您是否尝试将数据绑定(bind)到 userFactory.billingAddress 等或 userModel.model？一个大问题是您正在设置 self.model = userFactory.create() 但 userFactory.create 没有返回任何内容。所以基本上， user.model 将是未定义的。

我不知道您的具体用例，因此无法给出最佳解决方案。在大多数情况下，用户模型将负责存储用户数据，用户工厂将负责创建用户，并且通常会从某些 Controller /指令调用。一个例子是，我将在登录 Controller 中调用 loginServive，它将从后端 api 获取成功登录的用户详细信息，然后将用户详细信息存储在 usermodel 中。

在您的示例中，我不会从 usermodel 调用 userFactory.create。如果您想从其他工厂或 Controller 创建模型，则将从该工厂/ Controller 调用 create 方法。否则，我会在 userFactory 中初始化 userModel。

var userFactory = function (addressFactory, userModel) {
    var create = function () {
        userModel.model.BillingAddress = addressFactory.createAddress();
        userModel.model.ShippingAddress = addressFactory.createAddress();
        userModel.model.FirstName = '';
    }

    // if you want to expose create method to public
    return {
        create: create
    }
}

var userModel = function () {
    var model = {
      BillingAddress: {},
      ShippingAddress: {},
      FirstName = ""
    };

    return {
        model: model
    }
}

app.factory('userFactory', ['addressFactory', 'userModel', userFactory]);
app.factory('userModel', [userModel]);

编辑:我根据您想要在代码中实现的目标创建了一个plunker。查看here 。我添加了几个 Controller 并将 userModel 注入(inject)其中。我还演示了如何在 2 个 Controller 之间共享数据并设置 2 路绑定(bind)，以便持久保存数据。希望有帮助。

您的代码中存在一些问题 -

1. 在函数 User 中，您必须将地址属性附加到此函数，否则它将不会附加到创建的对象。在您的情况下，FirstName 等将附加到窗口对象，而不是用户实例。

2. 您需要将 userModel 定义为要注入(inject)另一个 Controller /服务等的工厂/服务，但我想您已经知道了。

3. 我仍然认为 userModel 不是创建模型的地方。如果您想在应用程序 init 上创建模型，那么只需在 userFactory 中执行此操作并将其保存在 userModel 中，如我在上面的代码示例中所示。