javascript - 以 Angular 分离 Controller 逻辑和工厂逻辑

Question

我不想将所有代码放在一个巨大的 Controller 中，因此我尝试对其进行一些重组，但遇到了此错误

Argument 'protocolController' is not a function, got undefined

我有我的工厂

/*
    FACTORY THAT HANDLES ALL REQUESTS.
*/

function asyncFactory() {

    var factory = this;

    factory.list = [];

    this.update = function(restUrl) {
        return $http.get(restUrl)
        .success(function(data){
            factory.list = data;
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
    };

    this.add = function(formData, restUrl){
        $http.post(restUrl, JSON.stringify(formData))
        .success(function(data){
            console.log('Success: ' + data);
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
    };

    this.remove = function(value, restUrl){
        // get index of clicked object
        var index = this.protocolList.indexOf(value);

        // Remove object with given index from array
        factory.list.splice(index, 1);

        var url = restUrl + value.id;

        // delete it from DB
        $http['delete'](url);

        console.log('Deleted object with ID ' + value.id);
    };

    // Change existing object
    this.change = function(value, restUrl) {

        // get index of clicked object
        var index = this.protocolList.indexOf(this.activeObject);

        var url = restURL + value.id + '/' + value.name;
        console.log('url: ' + url)
        // change it before store it to DB
        $http['put'](url);

        console.log('Changed object with ID ' + this.activeObject.id);

    };
}

以及我使用工厂的 Controller

/*
    PROTOCOL CONTROLLER
*/
function protocolController(asyncFactory){

    var controller = this;
    controller.list = asyncFactory.list;
    controller.formData = {};

    this.getUpdatedList = function() {
        asyncFactory.update('../protocols')
        .then(function(data){
            controller.list = data;
        });
    };

    this.addData = function(formData){
        asyncFactory.add(formData, '../protocols');
    };

    this.removeData = function(value){
        asyncFactory.remove(value, '../protocols');
    };

    this.editData = function(value){
        asyncFactory.change(value, '../protocols')
    }
}

并这样调用它:

/*
    MAIN - WHERE THE CONTROLLER AND FACTORY IS CALLED
*/
var app = angular.module('TransactionMonitoring', [])
.controller('protocolController', protocolController(asyncFactory));

Answer 1

更改:

/* 主 - Controller 和工厂的名称*/

var app = angular.module('TransactionMonitoring', [])
.controller('protocolController', protocolController(asyncFactory));

致，

/* 主 - Controller 和工厂的名称*/

var app = angular.module('TransactionMonitoring', [])
.controller('protocolController', function(asyncFactory){

  var controller = this;
    controller.list = asyncFactory.list;
    controller.formData = {};

    this.getUpdatedList = function() {
        asyncFactory.update('../protocols')
        .then(function(data){
            controller.list = data;
        });
    };

    this.addData = function(formData){
        asyncFactory.add(formData, '../protocols');
    };

    this.removeData = function(value){
        asyncFactory.remove(value, '../protocols');
    };

    this.editData = function(value){
        asyncFactory.change(value, '../protocols')
    }
}


});

服务:

app.service('asyncFactory',function ($http) {
 this.update = function(restUrl) {
        return $http.get(restUrl)
        .success(function(data){
            factory.list = data;
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
    };

    this.add = function(formData, restUrl){
        $http.post(restUrl, JSON.stringify(formData))
        .success(function(data){
            console.log('Success: ' + data);
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
    };

    this.remove = function(value, restUrl){
        // get index of clicked object
        var index = this.protocolList.indexOf(value);

        // Remove object with given index from array
        factory.list.splice(index, 1);

        var url = restUrl + value.id;

        // delete it from DB
        $http['delete'](url);

        console.log('Deleted object with ID ' + value.id);
    };

    // Change existing object
    this.change = function(value, restUrl) {

        // get index of clicked object
        var index = this.protocolList.indexOf(this.activeObject);

        var url = restURL + value.id + '/' + value.name;
        console.log('url: ' + url)
        // change it before store it to DB
        $http['put'](url);

        console.log('Changed object with ID ' + this.activeObject.id);

    };
}
}
)