AngularJS comment créer un template réutilisable pour Bootstrap modal

Donc je suis en utilisant le Bootstrap, AngularJS modal (http://angular-ui.github.io/bootstrap/). Qui fonctionne bien mais je me demandais si je pouvais créer un modèle de base qui peut prendre dans un titre et le contenu.

Ensuite, il serait de remplir mon template avec ces infos. Le modèle aurait un bouton de fermeture, le bouton annuler, de superposition, etc. Est-il un moyen facile de faire cela AngularJS?

Ceci est pris à partir de l'exemple et c'est ce que j'ai. Mon contenu est dans le templateUrl. Il serait agréable de passer dans le modèle modal donc je n'ai pas de garder recréer le titre et les boutons de fermeture pour chaque modal-je créer.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

source d'informationauteur Dragonfly

  1. 12

    Trouvé un moyen de le faire avec les directives. Il ouvre un modal avec une coutume de la directive qui dispose d'un modèle. Tout ce que vous avez dans votre modal sera inséré dans votre modèle personnalisé. C'est sympa car elle détient plus que juste un message. Il peut être rempli avec des formes, alerte, ou tout ce que vous voulez.

    C'était mon directive:

      app.directive('modalDialog', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      link: function(scope) {
        scope.cancel = function() {
          scope.$dismiss('cancel');
        };
      },
      template:
        "<div>" +
          "<div class='modal-header'>" +
            "<h3 ng-bind='dialogTitle'></h3>" +
            "<div ng-click='cancel()'>X</div>" +
          "</div>" +
          "<div class='modal-body' ng-transclude></div>" +
        "</div>"
    };
  });

    Modal ('yourTemplate.html'):

    <modal-dialog>
  <div> Your body/message </div>
</modal-dialog>

    Javascript:

    app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {
  $scope.openModal = function () {
    $modal.open({
      templateUrl: 'yourTemplate.html',
      controller: ModalController
    });
  };
}]);

var ModalController = function ($scope, $modalInstance) {
  $scope.dialogTitle = 'Your title';
};
  2. 3

    Caisse John Papa Serviette Chaude Angulaire BootStrap "modèle". Vous pouvez le récupérer à partir de là:

    https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js