Angularjs - Как реализовать геттеры и сеттеры для модели данных?

Question

Я создаю RESTful Webapp с помощью интерфейса AngularJS. Я пытаюсь разделить данные - полученные через 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
    [...]

Мне нравится достигать таких вещей, как title, через getter и setter в контроллерах, в модели, а не только через теги шаблона {{}}.

Спасибо за помощь!

Answer 1

Пусть метод load возвращает обещание:

        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;
            });
        },

В контроллере используйте возвращенное обещание:

    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 ожидаетданные, поступающие с сервера перед выполнением операторов console.log.