AngularJS come creare un modello riutilizzabile per Bootstrap modale

Question

Quindi sto utilizzando il modale Bootstrap di AngularJS (http://angular-ui.github.io/bootstrap/). Il che funziona bene, ma mi chiedevo se potevo creare un modello base che potesse contenere un titolo e il contenuto.

Quindi popolerebbe il mio modello con queste informazioni. Il modello dovrebbe avere un pulsante di chiusura, pulsante di annullamento, sovrapposizione, ecc. C'è un modo semplice per fare questo AngularJS?

Questo è preso dall'esempio e riguarda ciò che ho. Il mio contenuto è in templateUrl. Sarebbe bello passare il modello modale in modo da non dover continuare a ricreare il titolo e chiudere i pulsanti per ogni modale che creo.

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

Answer 1

trovato un modo per farlo con le direttive. Apre una modale con una direttiva personalizzata che ha un modello. Quindi qualsiasi cosa tu abbia nel tuo modal verrà inserita nel tuo modello personalizzato. Questo è bello perché contiene più di un semplice messaggio. Può essere riempito con moduli, avvisi o qualsiasi cosa tu voglia.

Questa era la mia direttiva:

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

modale ('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'; 
}; 

Answer 2

Acquista John Papa's Hot Towel Angular BootStrap "modello". È possibile raccoglierlo da lì:

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