javascript - 如何正确绑定(bind)到 AngularJS 中的服务属性？

Question

我有一家工厂，那里有几个预定义的合作伙伴(也可以是其他任何东西，我认为这是一个易于理解的示例)。在运行时，我们选择当前伙伴(基于我在此处省略的一些逻辑)。

angular.module('myApp').factory('PartnersService', function ($location, $log) {

  var partners = {
    firstPartner: {
      name: 'Default Partner',
      id: 1 // just an extra property as example 
    },
    secondPartner: {
      name: 'Other Partner',
      id: 2
    }
  };

  // set default value
  var partner = partners.firstPartner;

  var initPartner = function () {
    // based on some logic (omitted), select partner
    partner = partners.secondPartner;
    $log.log("initPartner should have changed partner to " +  partner.name);
  };

  return {
    initPartner: initPartner,
    partners: partners,
    partner: partner,
  };
});

然后，我想以 PartnersService.partner 的形式访问合作伙伴并查看它的变化，例如来自 Controller :

angular.module('myApp').controller('myController',
  function ($scope, $log, PartnersService) {
    // PartnersService.partner is the default partner (firstPartner)
    PartnersService.initPartner();
    // After initPartner, PartnersService.partner is still
    // the default, but I expected it to change
});

我找到了一些解决方法(在我看来......它们是解决方法吗？)，但对我来说感觉不自然，所以我想问问是否有更好的方法。

查看我在 JS Bin 上的完整工作示例.如果您觉得这个示例有点冗长，我深表歉意，但我想确保 Stack Overflow 用户理解我的顾虑，并且可以指出我的想法是否有问题。

解决方法 1(getter？):

angular.module('myApp').controller('myController', function ($scope, $log, PartnersService) {
  PartnersService.initPartner();
  var partner = PartnersService.getPartner();
  $log.log('I could use a getter: ' + partner.name);
});

angular.module('myApp').factory('PartnersService', function ($location, $log) {

  var getPartner = function () {
    return partner;
  };

  return {
    getPartner: getPartner,
    // ...
  };
});

解决方法 2(嵌套在对象字面量中):

angular.module('myApp').controller('myController', function ($scope, $log, PartnersService) {
  PartnersService.initPartner();
  $log.log('or nest the partner in an extra object literal: '
     + PartnersService.extraObjectLiteral.partner.name);
});

angular.module('myApp').factory('PartnersService', function ($location, $log) {
  var partners = { /*...*/ }
  var extraObjectLiteral = {
    partner: partners.firstPartner
  };

  var initPartner = function () {
    // based on some logic (omitted), select partner
    extraObjectLiteral.partner = partners.secondPartner;
  };

  return {
    extraObjectLiteral: extraObjectLiteral,
    //...
  };
});

Answer 1

更改为:

this.partner = partners.secondPartner;

在您的 initPartner 方法中。这将解决它。

当你做的时候你真正在做什么

  var partners = { ... }
  var partner = partners.firstPartner;

是，您在类中创建本地对象，但它们不是类的公开成员。并与

  return {
    initPartner: initPartner,
    partners: partners,
    partner: partner
  };

您创建类的成员，并将局部变量的值复制到类的成员。在您的 initPartner 方法中，您更改了本地对象，但类的对象保持不变。