Jak używać Angular-Strap do tworzenia modalu za pomocą kontrolera?

Question

Staram się znaleźć właściwy sposób na użycie modalnego paska na boku z kontrolerem.

Tak, kod wywołujący może wstrzyknąć $scope, udostępniając go modalowi. Ale są z tym problemy.

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

});

Spowoduje to zanieczyszczenie kontrolera wywołującego za pomocą metod i właściwości tylko modalnych.

Zwykle używam "controllerAs", a zatem nie mam nawet $scope, aby wstrzyknąć do modalu w pierwszej kolejności!

Można utworzyć nowy $scope, a następnie wstawić do niego metody, ale znowu będzie to wymagało wstrzyknięcia $scope do kontrolera nadrzędnego. Zły zły zły.

Jeśli używam ng-controller wewnątrz szablonu modalnego, mogę mieć kontroler. Ale to daje mi kolejny problem: teraz nie mogę wprowadzić danych do kontrolera modalnego, i nie ma mowy, żeby mój kod wywoławczy mógł wiedzieć, kiedy modał jest zamknięty, a przywracanie danych z modalu również staje się obowiązkiem (dotyczy fabryki tylko po to, aby zachować zsynchronizowane dane kontrolera nadrzędnego i podrzędnego).

Naprawdę walczę, jak zrobić to najlepiej.

Wszelkie pomysły?

Cheers

Aktualizuj

ten sposób mogę to zrobić teraz:

W moim szablonu robię dyrektywę, która otwiera się na modalnej.
Przykład:

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

Więc w zasadzie dyrektywa nazywa mój modalne i modalne, gdy zamyka się lub chce powrócić z wyniku, to wywołuje metodę określoną w parametrze dyrektywy.

ten sposób dyrektywa mogłaby wyglądać:

(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

Wystarczy użyć 'administrator danych' opcję:

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

Here's a plnkr

Answer 2

Można także spróbować użyć:

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

W tym przypadku okno dialogowe modalne będzie miało zasięg kontrolera "AnyCtrl". W szablonie możesz po prostu użyć vm.title lub innych właściwości zdefiniowanych w kontrolerze.