Question

我正在使用AngularJS前端构建RESTful Webapp。我正在尝试按照本教程将通过JSON接收的数据分离为可在控制器之间传递的对象： http://www.webdeveasy.com/angularjs-data-model/

我在“在控制器之间共享模型”这一点上苦苦挣扎。

我的问题是，我无法从对象内部获取值，也无法从使用对象的控制器获取值。我只能使用html模板中的{{}}标签来获取值。

在这里找到对象

(function () {
    "use strict";

    angular
        .module('app.admin')
        .factory('AdminEventFactory', AdminEventFactory);


    /** @ngInject */
    function  AdminEventFactory($http) {

        function AdminEvent(eventData) {
            if (eventData) {
                this.setData(eventData);
            }
        };

        //AdminEvent Objekt
        AdminEvent.prototype = {

            setData: function (eventData) {
                angular.extend(this, eventData);
            },

            load: function (id) {
                var scope = this;
                $http({
                    method: "GET",
                    url: "http://docker-backend.test/api/events/" + id
                }).then(function mySuccess(response) {
                    scope.setData(response.data);
                }, function myError(response) {
                    console.log(response);
                });
            },


            //How to reach the values set in the load method via getter here?
            getTitle: function(){
                console.log(this.setData.title); //undefined
            }
        };
        return AdminEvent;
    }

}());

这是来自控制器的呼叫：

(function () {
    "use strict";

    angular
        .module('app.admin')
        .controller('Admin.EventsController', AdminEventsController);

    /** @ngInject */
    function AdminEventsController( [...] , AdminEventFactory) { 

[...]

        function editEvent($eventId) {
            var event = new AdminEventFactory();
            event.load($eventId);
            console.log(event);
            event.getTitle(); //undefined
            $scope.event = event;
        }
[...]

在HTML模板中可以达到该值：

<!-- "TestTitle" -->
<div>{{ event.title }}</div>

通过控制台记录的事件：

AdminEvent {}
description: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
endDate: "2019-05-16T22:00:00+00:00"
id: 62
startDate: "2019-05-15T22:00:00+00:00"
title: "TestTitle"
> __proto__: Object
    [...]

我喜欢通过控制器中的getter和setter而不是通过模板标签{{}}来获得诸如title之类的东西。

谢谢您的帮助！

Answer 1

让dynamocli import your_data.csv --to your_table方法返回一个承诺：

load

在控制器中，使用返回的promise：

        load: function (id) {
            var scope = this;
            return $http({
                method: "GET",
                url: "http://docker-backend.test/api/events/" + id
            }).then(function mySuccess(response) {
                scope.setData(response.data);
                return response.data
            }, function myError(response) {
                console.log(response);
                throw response;
            });
        },

promise的function editEvent($eventId) { var event = new AdminEventFactory(); var promise = event.load($eventId); promise.then(function(data) { console.log(data); console.log(event); event.getTitle(); //undefined }); $scope.event = event; }方法在执行.then语句之前等待数据从服务器到达。

AngularJS-如何实现数据模型的获取器和设置器？

1 个答案: