javascript - AngularJS 服务继承问题

Question

我有一个如下所示的基本服务:

.service('BaseImageService', ['$q', 'ApiHandler', 'UploadService', function ($q, api, uploadService) {

    // Get our api path
    var apiPath = 'logos';

    // Creates our logo
    var _createLogo = function (model) {

        // Handle our uploads
        return _handleUploads(model).then(function () {

            // Create our logo
            return api.post(apiPath, model);
        });
    };

    // Edit our logo
    var _editLogo = function (model) {

        // Handle our uploads
        return _handleUploads(model).then(function () {

            // Create our logo
            return api.put(apiPath, model);
        });
    };

    // Handles our files
    var _handleUploads = function (model) {

        // Create a promises array
        var promises = [];

        // Get our file
        var file = model.file,
            old = model.old;

        // If we have a file
        if (file) {

            // Try to upload the file
            promises.push(uploadService.upload(model.file).then(function (response) {

                // Update our model
                model.path = response.path;
                model.thumbnail = response.thumbnail;
            }));

            // If we have an old model
            if (old) {

                // Delete both our files
                promises.push(uploadService.delete(old.path));
                promises.push(uploadService.delete(old.thumbnail));
            }
        }

        // After all promises have completed
        return $q.all(promises);
    };

    // Create our service
    var service = {

        // Update our api path
        updateApiPath: function (path) {

            // Set the api path
            apiPath = path;
        },

        // Gets a list of logos
        list: function (t) {

            if (t) {
                console.log(apiPath);
            }

            // Get our logo
            return api.get(apiPath);
        },

        // Get a single logo
        get: function (id) {

            // Get our logo
            return api.get(apiPath, { id: id });
        },

        // Create our logo
        save: function (model) {

            // If we are editing
            if (model.id) {

                // Edit our logo
                return _editLogo(model);

                // If we are creating
            } else {

                // Create our logo
                return _createLogo(model);
            }
        },

        // Deletes our logo
        delete: function (id) {

            // Delete our logo
            return api.delete(apiPath, { id: id });
        },

        // Prepare for editing
        prepareForEditing: function (model) {

            // Create our old object
            model.old = {
                path: model.path,
                thumbnail: model.thumbnail
            };
        }
    };

    // Return our service
    return service;
}])

然后我有一些“继承”此服务的服务，如下所示:

.service('ImageService', ['BaseImageService', function (baseService) {

    // Get our api path
    var apiPath = 'images';

    // Update the apiPath
    baseService.updateApiPath(apiPath);

    // Return our service
    return baseService;
}])

.service('LogoService', ['BaseImageService', function (baseService) {

    // Get our api path
    var apiPath = 'logos';

    // Update the apiPath
    baseService.updateApiPath(apiPath);

    // Return our service
    return baseService;
}])

.service('PlayerTextService', ['BaseImageService', function (baseService) {

    // Get our api path
    var apiPath = 'playerText';

    // Update the apiPath
    baseService.updateApiPath(apiPath);

    // Return our service
    return baseService;
}])

我认为这工作正常。但是我有这个页面依次调用所有 3 个服务(ImageService、LogoService 和 PlayerTextService)。在页面的第一个 View 中一切都很好，如果我导航离开然后返回图像服务实际上从播放器文本服务中拉回东西。现在我知道这是因为服务是单例的，但我不确定如何解决我的问题。

谁能帮帮我？

---

我添加了一个带有尝试解决方案的代码笔:

http://codepen.io/r3plica/pen/ONVBJO

---

尝试 2

http://codepen.io/r3plica/pen/jqPeMQ?editors=1010

Answer 1

您尝试的解决方案不起作用，因为 BaseService 是单例。因此，您将完全相同的实例注入(inject)所有三个服务注册函数，并且它们都配置相同的对象。所以基本上最后一个获胜。

您似乎希望拥有具有不同配置的单独服务。这就是提供程序的用途。它们允许分两步构建服务实例。请参阅关于该主题的这个很棒的 Stackoverflow 答案:

AngularJS: Service vs provider vs factory

作为引用，Restangular 是一个需要实现与你想要的完全一样的库。您可以将其用作蓝图并查看 Restangular 如何处理此要求:

https://github.com/mgonto/restangular#how-to-create-a-restangular-service-with-a-different-configuration-from-the-global-one

请注意，这些概念是基于 AngularJS 1 的，当您以后要使用 AngularJS 2 时，您需要以不同的方式处理它。