AngularJS,积垢用户界面的干式控制器
我有很多数据类型:用户、产品、类别。我有一个单独的视图/控制器,用于对每种类型的数据进行粗略处理。因此,“我的视图”允许创建一个项目,它显示一个列表,您可以对每个项目进行编辑、更新或删除。AngularJS,积垢用户界面的干式控制器,angularjs,controller,crud,dry,Angularjs,Controller,Crud,Dry,我有很多数据类型:用户、产品、类别。我有一个单独的视图/控制器,用于对每种类型的数据进行粗略处理。因此,“我的视图”允许创建一个项目,它显示一个列表,您可以对每个项目进行编辑、更新或删除。 控制器管理所有UI交互。例如,删除项目时,用户可以访问“取消”按钮几秒钟。所有CRUD操作都通过服务进入控制器 angular.module('myApp').controller( 'UsersManagerController', function UsersManagerController($sco
控制器管理所有UI交互。例如,删除项目时,用户可以访问“取消”按钮几秒钟。所有CRUD操作都通过服务进入控制器
angular.module('myApp').controller(
'UsersManagerController',
function UsersManagerController($scope, $timeout, userService) {
$scope.deleteUser = function(user) {
user.deleting = true;
user.deletionCancelable = true;
user.deletePromise = $timeout( function() {
user.deletionCancelable = false;
userService.deleteUser(user.id);
}, 2000);
};
$scope.isUserDeleting = function(user) {
return user.deleting;
}
$scope.cancelDelete = function(user) {
$timeout.cancel(user.deletePromise);
user.deletePromise = null;
user.deleting = false;
user.deletionCancelable = false;
}
现在,我希望避免对每种类型的数据(产品、类别…)重复此控制器代码,只编写几个视图。这意味着我想要一个可以动态接收服务的控制器,该服务公开特定数据类型的CRUD方法。我使用$injector成功地做到了这一点但我不知道如何从视图中为控制器提供服务名称。我尝试过以下方法:
<div ng-controller="ItemsManagerController" ng-init="setItemService('userService')">
但是setCrudService()是在运行时调用的,由AngularJs绑定管理。这意味着我无法确切地知道何时调用它,并且我的控制器的一些其他方法以前也被调用过,试图使用尚未设置的服务。
有人知道怎么做吗?也许我的设计有缺陷
更新:
我找到了一个解决方案:范围继承
<div ng-controller="UsersManagerController">
<div ng-controller="ItemsManagerController">
<div ng-repeat="user in items">
<span ng-click="deleteItem(user.id)">Remove {{user.name}}</span>
</div>
</div>
</div>
它可以工作,但我必须为每种数据类型编写一个控制器。我仍然在寻找一个更优雅的解决方案。我可以这样想 设置积垢生成服务
app.service('CRUDService', function($timeout) {
return {
setCRUD: function(scope, service, objName) {
var funcName = "delete" + objName;
scope[funcName] = function(obj) {
obj.deleting = true;
obj.deletionCancelable = true;
obj.deletePromise = $timeout( function() {
obj.deletionCancelable = false;
service.deleteUser(user.id);
}, 2000);
};
funcName = "is" + objName + "Deleting";
scope[funcName] = function(obj) {
return obj.deleting;
}
scope.cancelDelete = function(obj) {
$timeout.cancel(obj.deletePromise);
obj.deletePromise = null;
obj.deleting = false;
obj.deletionCancelable = false;
}
}
}
然后,在控制器中,使用它
CRUDService.setCRUD($scope, userService, "User");
我以前这样做的方式是创建一个指令来管理实体的CRUD操作,该实体是在该指令的init函数中设置的。为什么不使用一个指令并将“EntityType”作为属性,然后执行类似的操作呢?可以根据实体决定回服务器的帖子。如果这听起来对你来说是正确的,我可以详细说明一下。谢谢你的回答,是的,我想知道更多:-)控制器将如何与指令交互?如果单击“删除”按钮,将调用控制器$scope.deleteItem()。它如何知道如何删除可以是用户、产品或类别的项目?此外,如果数据类型是用户或产品,则视图也不相同。我最初的想法是将控制器视为API提供程序,视图使用此API。您可以将事件传递到指令中,并根据需要连接回调。我会给每个实体一个指令,比如。关于数据的加载和保存方式,我使用restanglar,每个实体都有自己的控制器,因此我可以执行restanglar.all(entityName).getList()。。。因此,指令本身管理实体的删除/更新/创建。不同实体的数据看起来不同,因此我使用一个元数据控制器返回实体的字段,crud网格基于此构建自身。另一种方法是直接在UsersManagerController中实例化ItemsManagerController。请看,我喜欢在setCRUD对象中创建动态函数的方式:-)但是。。。它不符合我的需要:我如何向控制器提供userService或productService?对于您的代码,我必须为每种数据类型编写一个控制器,UI交互代码将在每种数据类型中重复。现在我有一个控制器,它能够通过服务管理所有类型的视图(视图必须遵守控制器API)和所有类型的数据类型。如何使用给定数据类型的所需服务初始化控制器?
app.service('CRUDService', function($timeout) {
return {
setCRUD: function(scope, service, objName) {
var funcName = "delete" + objName;
scope[funcName] = function(obj) {
obj.deleting = true;
obj.deletionCancelable = true;
obj.deletePromise = $timeout( function() {
obj.deletionCancelable = false;
service.deleteUser(user.id);
}, 2000);
};
funcName = "is" + objName + "Deleting";
scope[funcName] = function(obj) {
return obj.deleting;
}
scope.cancelDelete = function(obj) {
$timeout.cancel(obj.deletePromise);
obj.deletePromise = null;
obj.deleting = false;
obj.deletionCancelable = false;
}
}
}
CRUDService.setCRUD($scope, userService, "User");