UibModal angular, risoluzione, provider sconosciuto

Sto cercando di esporre una modale “generica” ​​- usando $ uibModal di Angular – attraverso un servizio. Ecco la definizione di quel servizio:

angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) { var openCustomModal = function (size, title, message) { var actionToPerformOnConfirm = action; var modalInstance = $uibModal.open({ templateUrl : 'templates/CustomModal.html', size: size, resolve: { title: title, message: message } }); }; return { openCustomModal: openCustomModal }; }]); 

Niente di troppo complicato, sopra. Tuttavia, non funziona. Se rimuovo la proprietà resolve dall’object, il servizio funziona; tuttavia, se includo la proprietà resolve , ottengo l’errore del provider sconosciuto originato da quella proprietà.

La documentazione per la proprietà resolve legge:

(Tipo: Oggetto) – Membri che verranno risolti e passati al controller come locali; è equivalente alla proprietà resolver nel router.

L’objective è essere in grado di fornire un modello per il modale che utilizza queste proprietà nel suo DOM, ad esempio:

 

Cosa mi manca che sta causando l’errore?

Hai due problemi:

  1. È necessario definire il controller nella configurazione modale
  2. L’object risoluzione deve essere una mappa di string : function , dove string è il nome della dipendenza che verrà iniettata nel controller della modale e la function è una funzione factory che verrà utilizzata per fornire tale dipendenza quando il controller viene istanziato.

Esempio di lavoro: JSFiddle

JavaScript

 angular.module('myApp', ['ui.bootstrap']) .controller('MyModalController', MyModalController) .directive('modalTrigger', modalTriggerDirective) .factory('$myModal', myModalFactory) ; function MyModalController($uibModalInstance, items) { var vm = this; vm.content = items; vm.confirm = $uibModalInstance.close; vm.cancel = $uibModalInstance.dismiss; }; function modalTriggerDirective($myModal) { function postLink(scope, iElement, iAttrs) { function onClick() { var size = scope.$eval(iAttrs.size) || 'lg'; // default to large size var title = scope.$eval(iAttrs.title) || 'Default Title'; var message = scope.$eval(iAttrs.message) || 'Default Message'; $myModal.open(size, title, message); } iElement.on('click', onClick); scope.$on('$destroy', function() { iElement.off('click', onClick); }); } return { link: postLink }; } function myModalFactory($uibModal) { var open = function (size, title, message) { return $uibModal.open({ controller: 'MyModalController', controllerAs: 'vm', templateUrl : 'templates/CustomModal.html', size: size, resolve: { items: function() { return { title: title, message: message }; } } }); }; return { open: open }; } 

HTML