AngularJS通用控制器或控制器继承

时间:2015-07-07 16:24:23

标签: javascript angularjs inheritance

因此,在构建此应用程序时,我注意到我的一些控制器几乎完全相同。我喜欢把东西放干,所以我希望找到一种方法来制作一个其他控制器可以继承的通用控制器,但我对我发现的一些东西感到有些困惑。 这是我的两个控制器的示例,因此您可以看到相似之处:

.controller('CompaniesController', ['$state', '$filter', 'ArrayService', 'CompanyService', 'toastr', 'companies', 'roles', function ($state, $filter, arrayService, service, toastr, companies, roles) {

    // Assign this to a variable
    var self = this;

    // Get our companies
    self.companies = companies;

    // Our selected companies
    self.selected = [];
    self.send = {};
    self.delete = {};

    // Create our page sizes array
    self.pageSizes = [10, 20, 50, 100];

    // For filtering and sorting the table
    self.pageSize = self.pageSizes[0];
    self.predicate = 'email';
    self.reverse = false
    self.filter = '';

    // Select method
    self.select = function (company) {

        // Modify our array
        arrayService.modify(self.selected, company);

        // If our array is only 1
        if (self.selected.length === 1) {

            // Get the current selected company
            var current = self.selected[0];

            // Set our variables
            self.canHaveCenters = (current.role === 'Company');
            self.requiresConfirmation = (!current.emailConfirmed);

            // Else
        } else {

            // Reset our variables
            self.canHaveCenters = false;
            self.requiresConfirmation = false;
        }
    };

    // Check to see if the row is selected
    self.isSelected = function (company) {

        // If our item is in our array, return true
        return (arrayService.indexOf(self.selected, company) > -1);
    };

    // Change to the edit company state
    self.edit = function (e, company) {

        // Change our state
        changeState(e, company, 'saveCompany.edit');
    };

    // Change to the company centers state
    self.centers = function (e, company) {

        // Change our state
        changeState(e, company, 'saveCompany.centers');
    };

    // Deletes a company
    self.delete = function (e, company) {

        // Perform the delete
        recursion(e, company, service.delete, self.delete, '{0} has been deleted.', '{0} companies have been deleted.', true);
    };

    // Private recursion method
    var recursion = function (e, company, serviceCall, resultObject, singleMessage, multipleMessage, removeAfterExecution) {

        // Stop propagation
        e.stopPropagation();

        // If we have an index
        if (typeof company !== 'undefined') {

            // If our delete succeeded
            serviceCall(company.id).then(function () {

                // If we are to remove
                if (removeAfterExecution) {

                    // Remove the company from our array
                    self.companies.data.splice(index);
                }

                // Display a message
                toastr.success($filter('stringFormat')(singleMessage, company.email));
            });

            // Otherwise we have no index
        } else {

            // Create our counter
            var i = 0;

            // Create a variable to hold our errors
            var errors = [];

            // For each selected company
            for (i; i < self.selected.length; i++) {

                // Get our index
                var index = self.selected[i];

                // Get the current company
                var company = self.companies.data[index];

                // If we have a result
                serviceCall(company.id).then(function () {

                    // If we are to remove
                    if (removeAfterExecution) {

                        // Remove the company from our array
                        self.companies.data.splice(index);
                    }

                    // If there is an error
                }, function (error) {

                    // Add to our errors array
                    errors.push(error);
                });
            }

            // If we have some errors
            if (errors.length > 0) {

                // Set our delete error
                self.error = errors.join();

                // Otherwise everything worked
            } else {

                // Display a message
                toastr.success($filter('stringFormat')(multipleMessage, i));
            }
        }
    };

    // Private state change method
    var changeState = function (e, company, state) {

        // Stop propagation
        e.stopPropagation();

        // If we have an index
        if (typeof company !== 'undefined') {

            // Change state
            $state.go(state, { companyId: company.id });

            // Otherwise we have no index
        } else {

            // If we have 1 selected item
            if (self.selected.length === 1) {

                // Get our index
                index = self.selected[0];

                // Get our company
                var company = self.companies.data[index];

                // Change state
                $state.go(state, { companyId: company.id });
            }
        }
    }
}]);

.controller('UserCentersController', ['$stateParams', 'ArrayService', 'CenterService', 'centers', 'userCenters', function ($stateParams, arrayService, service, centers, userCenters) {

    var self = this;

    // Get our user Id
    var userId = $stateParams.userId;

    // Assign our centers
    self.centers = centers;
    self.userCenters = userCenters;

    // Create our page sizes array
    self.pageSizes = [10, 20, 50, 100];

    // For filtering and sorting the table
    self.pageSize = self.pageSizes[0];
    self.predicate = 'name';
    self.reverse = false;
    self.filter = '';
    self.selected = [];

    // Create a function to check if a center is in an array
    self.contains = function (center) {

        // Reference our data
        var data = self.userCenters.data;

        // If we have any data
        if (data) {

            // Check to see if our center is in the array
            return arrayService.indexOfByKey(data, 'id', center.id) > -1 ? true : false;
        }
    };

    // Adds the current center to the user
    self.add = function (e, center) {

        // Stop propagation
        modify(e, center, true);
    };

    // Removes the current center from the user
    self.remove = function (e, center) {

        // Stop propagation
        modify(e, center, false);
    };

    // Select method
    self.select = function (center) {

        // Modify our array
        arrayService.modify(self.selected, center);

        // Assign our variables
        self.canAdd = searchArray(self.userCenters.data, self.selected, false);
        self.canRemove = searchArray(self.userCenters.data, self.selected, true);
    };

    // Check to see if the row is selected
    self.isSelected = function (center) {

        // If our item is in our array, return true
        return (arrayService.indexOf(self.selected, center) > -1);
    };

    // Private method for checking if the selected items are all of the same state
    var searchArray = function (arrayToCheck, arrayToCompare, contains) {

        // Loop through the items to check
        for (var i = 0; i < arrayToCompare.length; i++) {

            // Get our current item
            var item = arrayToCompare[i];

            // See if our current id exis
            var found = arrayService.indexOfByKey(arrayToCheck, 'id', item.id) > -1;

            if (found != contains)
                return false;
        }

        return true;
    };

    // Private method for handling adding / removing or user centers
    var modify = function (e, center, adding) {

        // Stop propagation
        e.stopPropagation();

        // If we have an index
        if (typeof center !== 'undefined') {

            // Create a list
            var list = [];

            // Push our center into the list
            list.push(center);

            // Make our call
            service.modifyUserCenters(list, userId, adding).then(function () {}, function (error) {

                // Display our error
                self.error = error;
            });

            // Push to our user centers if it's not already there
            arrayService.modify(self.userCenters.data, center);
        }
    };
}]);

现在存在明显的差异,但同时存在很多相似之处。因为我不是JavaSript Guru,所以像原型继承这样的东西对我来说并不是什么意思。

我看到别人问过这个问题:

Creating a generic angularjs listController

它似乎与我想要的相似,但后来我偶然发现了这两种方法:

https://www.exratione.com/2013/10/two-approaches-to-angularjs-controller-inheritance/

这就是我开始感到困惑的地方。 对于我的情况,你可以看到,我可能会有类似的方法调用,并将有一些共享变量和函数。我有大约5个设计相似的控制器,我可以看到,如果我解决这个问题,那么我还可以创建/编辑控制器。

有人可以给我,一个外行,一个伸出援助之手吗?

0 个答案:

没有答案