创建一个通用的angularjs listController [英] Creating a generic angularjs listController
问题描述
角UI路由器可以让我解决我可以在我的控制器使用不同的注射。
Angular ui-router allows me to resolve different injections that I can use in my controllers.
我创建了一个简单的通用ListController,并在UI路由器我的模版注入包含特定该特定视图的CRUD功能的物体,沿。
I created a simple generic ListController, and in the ui-router I am injecting an object that contains the CRUD functions specific for that particular view, along with the template.
所以,举例来说,假设我有2个服务,相同的污物语法:
So, for example, let's say I have 2 services with the same "crud" syntax:
addPerson(person, callback){}
deletePerson(person, callback){}
editPerson(person, callback){}
....
addCar(car, callback){}
deleteCar(car, callback){}
editCar(car, callback){}
....
我创建了一个映射对象对这些服务的'CRUD功能映射到我的通用控制器,它是通过注射ui.router
I created a mapping object to map these services' CRUD functions into my generic controller, which is injected through the ui.router.
GenericController:
GenericController:
controller('ListCtrl', ['$scope', 'itemList', 'functions', function ($scope, itemList, functions) {
$scope.itemList = itemList;
$scope.addItem = function(){
functions.add($scope.item, callback);
}
.....
}
路由器:
.state('app.people', {
url: '/people',
templateUrl: 'views/people.html',
resolve: {
functions: ['People', function(People){
return {
add: People.createPerson,
update: People.updatePerson,
delete: People.deletePerson,
getItemList: People.getPeopleList
}
}],
itemList: ['$q', 'People', function($q, People){
var deferred = $q.defer();
People.getPeopleList(function(resp, status){
deferred.resolve(resp);
});
return deferred.promise;
}],
},
controller: 'GenericController'
})
所以,你可以通过只在其状态定义注入不同的功能映射汽车行驶使用它。
So you can use it with the cars too by just injecting a different function mapping in its state definition.
工程就像一个魅力。
但现在我想能够在专区内使用我的控制器,而不是只在一个完整的视图。现在,这里的问题:
But now I would like to be able to use my controller within a div, and not just in a full view. Now here's the problem:
如果我用的是NG-控制器指令,将喷油器不知道该怎么提供尽可能是'ITEMLIST'或'功能'(这是映射对象),但如果我初始化它通过$控制器对象,然后它不会有其自身的范围,我得到
If I use the ng-controller directive, the injector won't know what to provide as either 'itemList' or 'functions' (which is the mapping object), but if I instantiate it through the $controller object, then it won't have its own scope, and I get a
Unknown provider: $scopeProvider <- $scope
,因为它不能够创造自己的孩子..范围
我想我可以通过创建$ rootScope一个新的范围。美元的新()或者类似的东西,但感觉太像盗号了,因为我是新来的角度,我认为这可能是像一个不错的办法这个..
because it won't be able to create its own child scope.. I guess I could create a new scope through $rootScope.$new() or something like that, but it feels too much like hacking, and since I'm new to angular, I think that this might be a bad approach for something like this..
任何提示?
推荐答案
有关备查,我结束了编写通用控制器的系统,和微小的专用控制器的扩展他们。
For future reference, I ended up writing a system of generic controllers, and tiny specialized controllers that extend them.
有关上面的例子中,通用控制器由两个把PeopleController和CarController子类。在控制器code的开始,他们每个人都会做这样的事情:
For the example above, the generic controller is subclassed by both "PeopleController" and "CarController". At the beginning of the controller code, each one of them will do something like:
controller('PeopleController', ['$scope', 'peopleService', function ($scope, peopleService) {
angular.extend(this, $controller('listController', {$scope: $scope, functions:{
add: peopleService.addPerson,
remove: peopleService.removePerson,
[...]
}}));
$scope.people = $scope.itemList;
}
所以,现在我可以实例化自己的控制器即使在NG-控制器的指令,他们将使用通用控制器对所有的CRUD方法。
So now I can instantiate the controllers on their own even in the ng-controller directive, and they will use the generic controller for all of the CRUD methods.
这篇关于创建一个通用的angularjs listController的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!