我的服务返回函数的文本而不是对象

My service is returning the function's text and not an object

我有一项服务可以在我的应用程序中共享一个对象...我想 post 该对象到 mongo 数据库但是当我调用应该 return 的函数时它给我函数文本的对象。

服务在这里:

angular.module('comhubApp')
  .service('markerService', function () {
  this.markers = [];
    this.newMarker = {  title: '',
        description: '',
        lat: '',
        lon: '',
        user: '',
        created_at: '' };
// This is supposed to return the marker object
    this.newMarker = function  () {
        return this.newMarker;
    };
    this.setTitle = function (title) {
        this.newMarker.title = title;
        console.log('title service set: ' + title);
    };
    this.setDescription = function (description) {
        this.newMarker.description = description;
        console.log('Description service set: ' + description);
    };
    this.setLat = function (lat) {
        this.newMarker.lat = lat;
        console.log('lat service set: ' + lat);
    };
    this.setLon = function (lon) {
        this.newMarker.lon = lon;
        console.log('lon service set: ' + lon);
    };
    this.reset = function () {
        this.newMarker =  { title: '',
            description: '',
            lat: '',
            lon: '',
            user: '',
            created_at: ''};
            }

    this.setMarkers = function (markers) {
        this.markers = markers;
    }
    this.markers = function () {
        return this.markers;
    }
    this.addMarker = function (marker) {
        //todo append marker
    }
});

newMarker returns:

this.newMarker = function  () {
        return this.newMarker;
    };

使用服务的控制器在这里

$scope.addMarker = function() {
if($scope.newMarker.title === '') {
    console.log('newMarker title is empty');
  return;
}

markerService.setTitle($scope.newMarker.title);
markerService.setDescription($scope.newMarker.description);

console.log(markerService.newMarker());
// $http.post('/api/markers', { name: $scope.newMarker });
// $scope.newMarker = '';
};

$scope new marker is form data.. 我试图将其直接放入我的服务中,但没有成功。相反,我将表单数据输出到控制器中,然后将其推送到服务中。如果有更好的方法,请告诉我。

如果此服务在任何其他方面不好,请告诉我我是新手,所以我遵循了我在此处看到的另一个答案。

那么,那个函数就是问题所在。我盲目地效仿另一个例子,但在我的例子中这是错误的。解决方案是删除该功能并直接访问 markerService.newMarker。

我仍然是一个大菜鸟,我不确定为什么调用将函数作为字符串返回。这似乎与它的命名方式有关,但这只是一个猜测。

您正在用函数覆盖您的对象。只需给它们不同的名称,它就可以正常工作。

this.newMarker = { ... };
this.getNewMarker = function () { return this.newMarker };

编辑:

您还应该始终从标记创建新实例。否则你只是一直编辑同一个对象。这是我做的例子。这不是最佳做法,但希望您明白这一点。

angular.module('serviceApp', [])
.factory('Marker', function () {
    function Marker() {
        this.title = '';
        this.descrpition = '';
    }

    // use setters and getters if  you want to make your variable private
    // in this example we are not using these functions
    Marker.prototype.setTitle = function (title) {
        this.title = title;
    };

    Marker.prototype.setDescription = function (description) {
        this.description = description;    
    };

    return Marker;
})
.service('markerService', function (Marker) {
    this.markers = [];
    this.getNewMarker = function () {
        return new Marker();
    }
    this.addMarker = function (marker) {
        this.markers.push(marker);
    }

})
.controller('ServiceCtrl', function ($scope, markerService) {
    $scope.marker = markerService.getNewMarker();
    $scope.addMarker = function () {
        markerService.addMarker($scope.marker);
        $scope.marker = markerService.getNewMarker();
    }
    $scope.markers = markerService.markers;
});

您也可以在控制器中创建 Marker 并使用 markerService 来存储您的对象。

和工作演示: http://jsfiddle.net/3cvc9rrs/