Контроллер общего набора AngularJS

Question

Так что я не получил ответа от my last question, поэтому решил сам справиться с этим.

Я создал универсальный контроллер, как это:

.controller('GenericListController', function() { 

    // Define this 
    var self = this; 

    // Define our list 
    self.list = []; 

    // 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 = ''; 

    // For deleting 
    self.delete = function (e, model) { 

     // Delete the item 
     service.delete(model.id); 
    }; 
}); 

очень просто, как вы можете видеть. Теперь я использую это, вводя его в мой контроллер, как это:

.controller('DashboardController', ['GenericListController', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) { 

    // Assign this to a variable 
    var self = Controller; 
}]) 

В теории все, что присвоенной GenericListController теперь доступен для DashboardController. Проблема заключается в линии в общем контроллере, который выглядит следующим образом:

service.delete(model.id); 

Как-то мне нужно ссылаться моей службой в родовом контроллере. Я думал, что, возможно, я мог бы создать поставщика и вставить ссылку на службу в конструктор, но я не уверен, что это синглтон, это проблема, поэтому мне нужна помощь.

1. Является ли сервис/завод/поставщик хороший способ построить GenericListController?
2. Является ли сервис/фабрика единичным воздействием на что-либо? Если да, то могут ли они быть созданы, чтобы они не были одиночными?
3. Есть ли другой способ достичь того, что я хочу?

Update 1

Так появляется некоторые люди путают ....

Так что, если я создал фабрику, которая выглядит следующим образом:

.factory('ListControllerService', function() { 

    // Default constructor expecting a service 
    return function (service) { 

     // Define this 
     var self = this; 

     // Define our list 
     self.list = []; 

     // 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 = ''; 

     // For deleting 
     self.delete = function (e, model) { 

      // Delete the item 
      service.delete(model.id); 
     }; 
    }; 
}) 

затем создать 2 отдельных контроллера, которые выглядят следующим образом:

.controller('DashboardController', ['ControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) { 

    // Assign this to a variable 
    var self = new Controller(service); 

    self.list = centers; 
}]) 

.controller('CompanyController', ['ControllerService', 'CompanyService', 'ArrayService', 'companies', function (Controller, service, arrayService, centers) { 

    // Assign this to a variable 
    var self = new Controller(service); 

    self.list = companies; 
}]) 

Надеюсь, вы увидите, что сервис, который я впрыскиваю в ListControllerService, отличается для каждого контроллера. Единственное предостережение, которое у меня есть с моим примером, заключается в том, что каждая «служба» должна иметь метод удаления (не так сложно, потому что все они являются службами api).

Надеюсь, это объяснит все лучше.

Answer 1

Решение, которое я использую в моем текущем проекте, - это написать функцию, которая регистрирует завод.

function CreateMyGenericFactory(factoryName, serviceName) 
    app.factory(factoryName, [serviceName, function (service){ 

     var GenericListFactory = { 
      list: [], 
      pageSizes: [10, 20, 50, 100], 
      predicate: 'name', 
      reverse: false, 
      filter: '' 
      delete: function(e, model){ 
       service.delete(model.id); 
      } 
     } 

     GenericListFactory.pageSize = GenericListFactory.pageSizes[0]; 

     return GenericListFactory; 

    }]); 
} 

Затем выполните функцию в вашем JS, чтобы динамически регистрировать новую фабрику.

CreateMyGenericFactory('ListFactory', 'ListService'); 

И используйте его в своем контроллере.

app.controller('GenericListController', ['ListFactory', function (ListFactory) { 
    ... 
    console.log(ListFactory.pageSizes.length); // -> 4 
    ListFactory.delete(e, model); 
}]; 

Я также зарегистрировал службу в моей CreateMyGenericFactory функции для дальнейшего сокращения дублирования, вы можете рассмотреть возможность сделать что хорошо, если каждый завод имеет свою собственную службу.

Окончательное решение выглядело следующим образом.

function CreateMyGenericFactory(name) 
    var factoryName = name + 'Factory'; // e.g. listFactory 
    var serviceName = name + 'Service'; // e.g. listService 

    app.factory(factoryName, [serviceName, function (service){ 

     var factory = { 
      list: [], 
      pageSizes: [10, 20, 50, 100], 
      predicate: 'name', 
      reverse: false, 
      filter: '' 
      delete: function(e, model){ 
       service.delete(model.id); 
      } 
     } 

     factory.pageSize = factory.pageSizes[0]; 

     return factory; 

    }]); 

    app.service(serviceName, ['$resource', function (resource){ 

     return $resource(Modus[backend] + '/api/'+slug+'s/:id', { 
      id: '@_id' 
     }); 

    }]); 
} 

Таким образом, я мог бы зарегистрировать все Фабрики и Услуги, которые мне нужны, без дублирования кода.

CreateMyGenericFactory('user'); 
// this registered userFactory and userService 

Answer 2

Хорошо, похоже, что я был почти там. Мне удалось решить это, но я не уверен, что это лучший способ сделать это, но это, безусловно, работает.

Так что моя служба очень похожа на перед:

.factory('ListControllerService', function() { 

    // Default constructor expecting a service 
    return function (ctrl, service) { 

     // Define this 
     var self = ctrl; 

     // Define our list 
     self.list = []; 

     // 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 = ''; 

     // For deleting 
     self.delete = function (e, model) { 

      // Delete the item 
      service.delete(model.id); 
     }; 

     return self; 
    }; 
}) 

Единственное, что меняется, вместо:

self = this; 

я теперь делать:

self = ctrl; 

Ctrl - это контроллер, который наследуется от этой службы. Я также возвращаю self, чтобы я мог привязать его к себе в унаследованном контроллере.

теперь мой контроллер выглядит следующим образом:

.controller('DashboardController', ['ListControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) { 

    // Assign this to a variable 
    var self = new Controller(this, service); 

    console.log(this); 
    console.log(self); 

    // Assign our centers 
    self.list = centers; 
}]) 

как console.log выход такой же, который является большим.