web-dev-qa-db-fra.com

Angular uibModal, Resolve, Fournisseur inconnu

J'essaie d'exposer un modal "générique" - en utilisant celui de Angular $ uibModal - via un service. Voici la définition de ce service:

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
    };
}]);

Rien de trop compliqué, ci-dessus. Cependant, cela ne fonctionne pas. Si je supprime la propriété resolve de l'objet, le service fonctionne; Cependant, si j'inclus la propriété resolve, j'obtiens l'erreur fournisseur inconn provenant de cette propriété.

La documentation de la propriété resolve se lit comme suit:

(Type: Object) - Membres qui seront résolus et transmis au contrôleur en tant que sections locales. c'est l'équivalent de la propriété de résolution du routeur.

L’objectif est de pouvoir fournir un modèle pour le modal qui utilise ces propriétés dans son DOM, par exemple. :

<div ng-controller="CustomModalController">
    <div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        {{message}}
    </div>
    <div class="modal-footer">
        <button class="ad-button ad-blue" type="button" ng-click="confirmAction()"></button>
        <button class="ad-button ad-blue" type="button" ng-click="cancelAction()"></button>
    </div>
</div>

Que me manque-t-il qui provoque cette erreur?

javascripthtmlangularjs
21
Thomas

Vous avez deux problèmes:

  1. Vous devez définir le contrôleur dans votre configuration modale
  2. Votre objet de résolution doit être une carte de string: function, où string est le nom de la dépendance qui sera injectée dans le contrôleur de votre modal et function est une fonction d’usine qui sera utilisée pour fournir cette dépendance lors de l’instanciation du contrôleur.

Exemple de travail: 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

<script type="text/ng-template" id="templates/CustomModal.html">
  <div class="modal-header">
    <h3 class="modal-title">{{vm.content.title}}</h3>
  </div>
  <div class="modal-body">
    {{vm.content.message}}
  </div>
  <div class="modal-footer">
    <button class="ad-button ad-blue" type="button" ng-click="vm.confirm()">
      confirm
    </button>
    <button class="ad-button ad-blue" type="button" ng-click="vm.cancel()">
      cancel
    </button>
  </div>
</script>

<button modal-trigger size="'sm'" title="'Hello World!'" message="'This is a test'">
  Click Me
</button>
31
Shaun Scovil