Angularjs - 如何为数据模型实现 getter 和 setter？答案

【问题标题】：Angularjs - How to implement getters and setters to Data Model?Angularjs - 如何为数据模型实现 getter 和 setter？
【发布时间】：2019-05-20 16:04:03
【问题描述】：

我正在使用 AngularJS 前端构建一个 RESTful Web 应用程序。我正在尝试将通过 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 来获得诸如标题之类的东西，而不仅仅是通过模板标签 {{ }}。

感谢您的帮助！

【问题讨论】：

标签： javascript json angularjs rest

【解决方案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;
            });
        },

在控制器中，使用返回的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;
    }

promise 的.then 方法在执行console.log 语句之前等待数据从服务器到达。

【讨论】：