因此,在构建此应用程序时,我注意到我的一些控制器几乎完全相同。我喜欢把东西放干,所以我希望找到一种方法来制作一个其他控制器可以继承的通用控制器,但我对我发现的一些东西感到有些困惑。 这是我的两个控制器的示例,因此您可以看到相似之处:
.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个设计相似的控制器,我可以看到,如果我解决这个问题,那么我还可以创建/编辑控制器。
有人可以给我,一个外行,一个伸出援助之手吗?