在 AngularJS 工厂中使用 Getter/Setter 方法

Question

我运行在尝试为我的 angular 模块之一创建工厂时遇到了一些令人头疼的问题。我需要获取一些 JSON 数据并能够在保持原始格式的同时使用它，以便我可以将其转换回字符串。所以如果我有 JSON 数据，例如：

[ [ '11/09/2012', {gender:'M'}, 'John', 'Smith'], ['07/22/1986', {gender:'M'}, 'Bill', 'Miller], ...]

我希望能够调用 data.birthday 或 data.firstName，而不必在我的视图中跟踪结构。

为此，我有一个看起来像这样的工厂：

.factory('DataObject', function () {

        DataObject.prototype.objToArray = function()
        {
            var arrayVal = [];

            arrayVal[0] = this.bday;
            arrayVal[1] = this.phys;
            arrayVal[2] = this.fname;
            arrayVal[3] = this.lname;               
            return arrayVal;
        };

        function DataObject(data, valueBuilder) {
            if(data)
            {
                this.bday = data[0];
                this.phys = data[1];
                this.fname = data[2];                   
                this.lname = data[3];
            }
        }
        return (DataObject);
    })

那部分工作正常。问题是，我还想添加 angular 访问器方法以允许我 get/set 嵌套值，如性别。类似于：

get gender(){ return this.phys.gender; }

我不知道如何在我的工厂中使用该语法。它允许我使用访问器方法的唯一方法是更改

function DataObject(data, valueBuilder) {}
return DataObject;

到

return { get gender(), set gender(val)};

这意味着我无法使用数据实际实例化我的工厂。我确定必须有某种方法可以做到这一点。我错过了什么？

Answer 1

我不确定这是否是您想要的？但本质上，我是 return 创建一个您可以修改的对象的新实例。由于工厂是单例，您需要 return 一个可以单独修改的实例。

这是一个fiddle：

https://jsfiddle.net/1bejzxwq/

angular.module('HelloApp', [])
    .factory('DataObjectFactory', [DataObjectFactory])
    .controller('Test', ['$scope', 'DataObjectFactory', Test]);


function Test ($scope, DataObjectFactory) {
    $scope.hi = "hi";

    var data = [ '11/09/2012', {gender:'M'}, 'John', 'Smith'];
    var object = DataObjectFactory.DataObject(data);
    console.log(object.getFirstName());
}

function DataObjectFactory () {

    var service = {
        DataObject: function (data) {
            return new DataObject(data);
        }
    };

    return service;

    function DataObject(data) {
        if(data) {
            this.bday = data[0];
            this.phys = data[1];
            this.fname = data[2];                   
            this.lname = data[3];
        }

        this.getFirstName = function () {
            return this.fname || null;
        }
    }
}

也许看看这个答案中的例子（选项 2）：

Angular.js data accessor

Answer 2

让我试一试。我将其分解为一个 Person 构造函数、一个 PersonFactory，然后是一个测试控制器。我遗漏了 toArray 的东西，但添加起来很容易。使用 Person 构造函数可以让您使用纯 javascript 而不会 angular 妨碍。

(function(angular)
{
  var Person = function(data)
  {
    item = {
      bday:  data[0],
      phys:  data[1],
      fname: data[2],                   
      lname: data[3],

      get gender() { return this.phys.gender; }
    };
    return item;
  };
  var personModule = angular.module('zaysoApp.personModule', []);

  personModule.factory('personFactory', [ function()
  {
    return { create: function(data) { return new Person(data); }};
  }]);

  personModule.controller('PersonTestController', ['$scope','personFactory',
  function($scope,personFactory) 
  {
    // Pretend we used angular.fromJson() to make these
    var p1 = ['11/09/2012', { gender: 'M' }, 'John', 'Smith'];
    var p2 = ['07/22/1986', { gender: 'M' }, 'Bill', 'Miller'];

    [p1,p2].forEach(function(data)
    {
      person = personFactory.create(data);
      console.log(person.fname + ' ' + person.gender);
    });
  }
]);
})(angular);

不确定您在寻找什么，但我认为这展示了如何创建构造函数，然后在 angular.

中使用它

Answer 3

这是 angular 中的 setter 和 getter 示例。在 setter 中，我附加了一些额外的字符串 Mr，在 getter : 中

var myApp = angular.module('myApp', []);

myApp.service('userService', [function () {
    var first_name, last_name;
    this.user = {
        get name() {
            return ':' + first_name;
        },
        set name(val) {
            first_name = 'Mr ' + val;
        }
    };
    return this.user;
}]);

myApp.controller('testCtrl', ['$scope', 'userService', function ($scope, userService) {
    userService.name = 'Been';
    
    $scope.test = userService;
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<h2>Test Controller</h2>
    <div class="wrapper" ng-controller="testCtrl">
        My Name {{test.name}}
    </div>
</div>

在 AngularJS 工厂中使用 Getter/Setter 方法

Using Getter/Setter Methods in AngularJS Factory

constructor

factory

accessor

angularjs