Come usare Angular-Strap per creare una modale con un controller?

Question

Non riesco a trovare il modo giusto di utilizzare un modulatore angolare-cinturino/a parte con un controller.

Sì, il codice di chiamata può iniettare $scope, rendendolo disponibile per il modale. Ma ci sono problemi con questo.

myModal = $modal({ 
scope: $scope, 
template: 'template.html', 
show: false, 
backdrop: "static", 
keyboard: false, 
persist: true 

});

Ciò inquinerà il controller chiamante con metodi e proprietà solo modali.

Io di solito uso "controllerAs", e quindi non ho nemmeno un $scope da iniettare nel modale in primo luogo!

È possibile creare un nuovo $scope e quindi inserire metodi in questo, ma, di nuovo, ciò richiederebbe l'iniezione di $scope nel controller padre. Male male male.

Se utilizzo lo ng-controller all'interno del modello modale, posso avere il mio controller. Ma il suo mi dà un altro problema: ora non posso iniettare dati nel controller modale, e non c'è modo in cui il mio codice chiamante possa sapere quando la modale è chiusa e il ritorno dei dati dal modale diventa anche un lavoro ingrato (riguarda una fabbrica solo per mantenere il dati del controller genitore e figlio sincronizzati).

Sto davvero lottando su come rendere questo il modo migliore.

Qualche idea?

Acclamazioni

Aggiornamento

Questo è come lo faccio per ora:

Nel mio modello faccio una direttiva che apre il modale.
Esempio:

<my-modal 
     on-update="ctrl.OnDialogUpdate"> 
</my-modal> 

Quindi, in pratica la direttiva chiama il mio modale e quando la modal chiude o si vuole tornare con un risultato, si chiama il metodo specificato nel parametro direttiva.

Questo è come la direttiva potrebbe apparire:

(function() { 

'use strict'; 

angular.module('app').directive('myModal',myModal); 

function myModal(){ 

    return { 

     restrict: 'E', 

     // The modal callback specified in the directive tag 
     scope: { 
      onUpdate: '&?' 
     }, 

     replace: true, 

     // This is the template for the directive, not the modal 
     templateUrl: 'button.html', 

     controllerAs: 'ctrl', 

     bindToController: true, 

     compile: function (element, attrs) { 

      return function (scope, element, attrs) { 

      }; 
     }, 


     /*@ngInject*/ 
     controller: function($scope, $log, $aside){ 

      var self = this; 

      var myDialog = $aside({ 

       // Dialog template 
       template: 'my-modal.template.html', 
       show: false, 
       animation: 'am-fade-and-slide-right', 
       placement: 'right', 
       backdrop: true, 
       html: true, 
       container: '', 
       scope: $scope 
      }); 


      // Opens modal 
      self.ShowDialog = function(){ 
       myDialog.$promise.then(function() { 
        myDialog.show(); 
       }) 
      }; 


      // Expose Update() method to the dialog template 
      $scope.Update = function(){ 

       if(angular.isFunction(self.onUpdate)) { 

        self.onUpdate()(); 
       } 

      } 

     } 
    } 

} 

})(); 

Answer 1

Basta usare l'opzione 'controller':

$scope.showModal = function() { 
    $modal({ 
    title: 'My Title', 
    content: 'My Content', 
    show: true, 
    controller: 'ModalCtrl' 
    }); 
}; 

Here's a plnkr

Answer 2

Si può anche provare a utilizzare:

var modal= $modal({ 
      templateUrl: '.../../xxx.modal.html', 
      show: false, 
      backdrop: 'static', 
      controller: 'anyCtrl as vm' 
     }); 

In questo caso la finestra di dialogo modale avrà lo scopo del controller "anyCtrl". Nel modello puoi semplicemente usare vm.title o altre proprietà che sono definite nel controller.