javascript - AngularJS : How to return a reusable object from a factory?

标签 javascript angularjs angularjs-factory

在 AngularJS Controller 中,我定义了以下内容:

app.controller('contentTypeController', ['$scope', '$log', 'abstractDataFactory', 'customFunctions',
    // the abstract data factory accepts controller type parameters for RESTful CRUD

    function ($scope, $log, abstractDataFactory, customFunctions) {

        var dataFactory = new abstractDataFactory("/odata/ContentType");

        var crudServiceBaseUrl = "/odata/ContentType";

        var dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read:

                    function (options) {
                        var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");

                        dataFactory.getList(odataParams)
                            .success(function (result) {
                                options.success(result);
                            })
                            .error (function (error) {
                                console.log("data error");
                            });
                  ...

这一切都运行良好。但是,我不想重新定义 dataSource在另一个 Controller 中,对于这个特定的数据集 - ContentType,并希望将其抽象出来。

结果,我创建了一个新的 dataSourceFactory 。我并不完全清楚实现这一点的最佳策略是什么。

我想我想要新建 dataSourceFactory就像我做abstractDataFactory一样来自 Controller ,并将这些参数传递到abstractDataFactory来自dataSourceFactory .

注入(inject)新的dataSourceFactory后进入我的 Controller ,它将返回各种数据源,具体取决于方法调用:

var dataSourceFactory = new dataSourceFactory("/odata/ContentType");
var dataSource = dataSourceFactory.contentType();  // .userDetails(), .someOtherData()...

据我了解,Angular 工厂返回函数,所以我不认为这正是我正在寻找的。

到目前为止,这是我的非工作实现:

Controller :

app.controller('contentTypeController', ['$scope', '$log', 'dataSourceFactory', 'customFunctions',

    function ($scope, $log, dataSourceFactory, customFunctions) {

        var dataSourceFactory = new dataSourceFactory("/odata/ContentType");
        var dataSource = dataSourceFactory.contentTypes();  // returns a function, rather than kendo.data.DataSource object
        ...

数据源工厂:

// factory to return datasources
app.factory('dataSourceFactory', function (abstractDataFactory) {

    function dataSourceFactory(odataUrlBase) {
        this.dataFactory = new abstractDataFactory(odataUrlBase);
    }

    dataSourceFactory.prototype = {
        contentTypes: function () {
            new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read:

                        function (options) {
                            var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");

                            this.dataFactory.getList(odataParams)
                                .success(function (result) {
                                    options.success(result);
                                })
                                .error(function (error) {
                                    console.log("data error");
                                });

                        }
               },
                batch: false,
                pageSize: 10,
                serverPaging: true,
                change: function (e) {
                    console.log("change: " + e.action);
                    // do something with e
                },
                schema: {
                    data: function (data) {
                        //console.log(data)
                        return data.value;
                    },
                    total: function (data) {
                        console.log("count: " + data["odata.count"]);
                        return data["odata.count"];
                    },
                    model: {
                        id: "ContentTypeId",
                        fields: {
                            ContentTypeId: { editable: false, nullable: true },
                            //UserId: {editable: false, nullable: false },
                            Description: { type: "string", validation: { required: true } },
                            //msrepl_tran_version: { type: "string", validation: { required: true } }
                        }
                    }
                },
                error: function (e) {
                    //var response = JSON.parse(e.responseText);
                    var response = e.status;
                    console.log(response);
                }
            })  // dataSource
        }  // contentTypes
    };

    return dataSourceFactory;

});

总而言之,

var dataSource = dataSourceFactory.contentTypes();  // returns a function, rather than kendo.data.DataSource object     

1) 数据源必须是新的 kendo.data.DataSource 的值对象,而不是函数。由于工厂返回该函数,我如何在我的 Controller 中使用它,这是解决这个问题的正确方法吗?如果不是建议的话?

2) 我将在 dataSourceFactory 中定义各种数据源。并按上述方式使用。这是推荐的吗(我要重用代码,而不是为每个数据源使用一堆单独的工厂),如果没有,有建议吗?

最佳答案

多亏了评论的微妙插入,我才弄清楚了这一点。

第一个问题是我实际上并没有从函数调用中返回任何内容(缺少 contentTypes: 中的 return 语句)。

其次,我必须在 dataSourceFactory 中定义一个 dataFactory 来表示 abstractDataFactory:

app.factory('dataSourceFactory', function (abstractDataFactory) {
    var dataFactory;

    function dataSourceFactory(odataUrlBase) {
        dataFactory = new abstractDataFactory(odataUrlBase);
    }

    dataSourceFactory.prototype = {
        contentTypes: function () {
            return new kendo.data.DataSource({ ... }...

我仍然不清楚的是,这是否是一种好方法 - 让一个工厂返回我的所有数据源对象。

关于javascript - AngularJS : How to return a reusable object from a factory?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22357238/

相关文章:

javascript - 为什么所有迭代都同时运行?

javascript - 如何在 Javascript 中的字符串末尾添加一个空格

javascript - jQuery - 从字符串中删除文本

javascript - 能够访问服务返回的对象,但访问其属性给出未定义

Angularjs - 工厂/服务内的 Restangular 调用

javascript - 是否可以通过使用 onload 事件来衡量 gpu/cpu 的性能?

angularjs - 在我推送的数组中获取不同的值

AngularJS - 无法从 $http 读取响应头

javascript - 无法使用Angular.js隐藏表格行的按钮

angularjs - 如何在 angularjs 中用 2 个相同的 Controller 制作原型(prototype)?