访问工厂返回的对象并在视图中修改

时间:2015-11-05 10:37:09

标签: javascript angularjs ionic

我是AngularJS的新手,所以如果我做了些蠢事,请纠正我。

我希望有一个可以从视图中更改的模型对象,其中一些方法必须是公共的其他方法。

所以我为模型创建了一个工厂

angular.module('nanApp.models', [])
    .factory('PoiModel', [function () {
        function Poi() {
            this.name;
            this.tags;
            this.address = {name: undefined, location: {lat: undefined, lng: undefined}};

            function addAddress(name, location) {
                this.address = {name: name, location: {lat: location.lat, lng: location.lng}};
            }

            function place() {
                return this.address.name;
            }

            function print() {
                return {name: this.name, address: this.address, tags: this.tags};
            }

            return {
                addAddress: function (name, location) {
                    return addAddress(name, location);
                },
                place: function () {
                    return place();
                },
                print: function () {
                    return print();
                },
                name: this.name,
                tags: this.tags
            }
        };

        return {
            createNew: function () {
                return new Poi();
            }
        }
    }])
;

从外面我们可以创建一个POI,名称和标签是公开的,因为必须从视图中绑定,地址是私有的,但有一个公共方法可以修改。

控制器看起来像

angular.module('nanApp.controllers.pois', ['nanApp.services', 'nanApp.models'])
.controller('PoiCtrl', function ($scope, PoiModel) {
    var vm = this;

    vm.poi = PoiModel.createNew();

    vm.saveElement = function () {
        console.log(vm.poi);
        console.log(vm.poi.print());
    };

    vm.locationSuccess = function (name, location) {
        vm.poi.addAddress(name, location);
    };
});

然后从视图中我可以调用locationSuccess并修改地址。 从表单中我想更改名称,标签然后保存。

当我完成并调用saveElement()正在打印

Object {name: "a", tags: "b"}
Object {name: "", address: Object, tags: undefined}
  address: Object
    location: Object
      lat: 50.8176986
      lng: -0.12310700000000452
    name: "Marine Parade, Brighton, United Kingdom"
    __proto__: Object
  name: ""
  tags: undefined
  __proto__: Object

据我所知,第一张打印件不打印地址,因为它是私有的,但如果我将其公开则未定义。 在第二个印刷品中,为什么名称和标签未定义?

谢谢,

1 个答案:

答案 0 :(得分:0)

最后,我用更好的sintax解决了它。

angular.module('nanApp.models', [])
    .factory('PoiModel', [function () {
        var poi = {};
        var address = {name: undefined, location: {lat: undefined, lng: undefined}};

        poi.addAddress = function (name, location) {
            address = {name: name, location: {lat: location.lat, lng: location.lng}};
        };

        poi.place = function () {
            return address.name;
        };

        poi.print = function () {
            return {name: this.name, address: address, tags: this.tags};
        };

        return {
            createNew: function () {
                return poi;
            }
        }
    }])
;