Question

我遇到了一些令人头疼的问题，试图为我的一个角度模块创建工厂。我需要获取一些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);
    })

那部分工作正常。问题是，我还想添加角度访问器方法，以允许我获取/设置像性别这样的嵌套值。类似的东西：

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

我无法弄清楚如何在我的工厂中使用该语法。允许我使用访问器方法的唯一方法是更改

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

到

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

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

Answer 1

这是一个有角度的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>

Answer 2

让我试一试。我把事情分解为Person构造函数，PersonFactory然后是测试控制器。我遗漏了toArray的东西，但它很容易添加。使用Person构造函数可以让你使用纯粹的javascript，而不会妨碍角色。

(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);

不确定您要查找的是什么，但我认为这显示了如何制作构造函数，然后从角度使用它。

Answer 3

我不确定这是不是你要追求的？但基本上我正在返回一个你可以修改的对象的新实例。由于工厂是单件，您需要返回一个可以单独修改的实例。

这是一个小提琴：

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

在AngularJS Factory中使用Getter / Setter方法

3 个答案: