Как использовать угловой ремень для создания модального с контроллером?

Question

Я изо всех сил пытаюсь найти правильный способ использования Углового ремешка с модулем/в сторону с контроллером.

Да, код вызова может вводить $scope, делая его доступным для модального. Но есть проблемы с этим.

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

});

Это будет загрязнять вызывающий контроллер потенциально модальными методами и свойствами.

Обычно я использую «controllerAs», поэтому у меня даже нет $scope, чтобы вставлять в модальную систему в первую очередь!

Вы можете создать новый $scope, а затем вставить в него методы, но опять же, что потребует ввода $scope в родительский контроллер. Плохо плохо плохо.

Если я использую ng-controller внутри модального шаблона, у меня может быть мой контроллер. Но он дает мне еще одну проблему: теперь я не могу вставлять данные в модальный контроллер, и мой код может не знать, когда модальный объект закрыт, а также возвращать данные из модала также становится хором (требуется фабрика, чтобы сохранить синхронизация родительских и дочерних контроллеров).

Я действительно борюсь за то, как сделать это лучшим способом.

Любые идеи?

Приветствия

Update

Это, как я это делаю сейчас:

В моем шаблоне я делаю директиву, которая открывает модальный.
Пример:

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

Поэтому в основном эта директива вызывает мое модальность и когда модальный закрывает или хочет вернуться с результатом, он вызывает метод, указанный в параметре директивы.

Это как директива может выглядеть:

(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

Просто используйте опцию 'контроллер':

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

Here's a plnkr

Answer 2

Вы также можете попробовать использовать:

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

В этом случае ваш модальный диалог будет иметь область действия контроллера anyCtrl. В шаблоне вы можете просто использовать vm.title или другие свойства, которые определены в контроллере.