创建一个通用的 angularjs listController [英] Creating a generic angularjs listController

问题描述

Angular ui-router 允许我解决可以在我的控制器中使用的不同注入.

Angular ui-router allows me to resolve different injections that I can use in my controllers.

我创建了一个简单的通用 ListController，并在 ui-router 中注入了一个对象，该对象包含特定于该特定视图的 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 个具有相同crud"语法的服务:

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.

通用控制器:

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.

就像一个魅力.

但现在我希望能够在 div 中使用我的控制器，而不仅仅是在完整视图中.现在问题来了:

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-controller 指令，注入器将不知道提供什么作为 'itemList' 或 'functions'(这是映射对象)，但是如果我通过 $controller 对象实例化它，那么它不会有自己的范围，我得到一个

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.$new() 或类似的东西创建一个新的范围，但感觉太像黑客了，而且由于我是 angular 的新手，我认为这对于类似的东西来说可能是一个不好的方法这个..

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"子类化.在控制器代码的开头，他们每个人都会做这样的事情:

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-controller 指令中，我也可以自己实例化控制器，并且它们将对所有 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屋！