How to use Angular -Strap to create modal with controller?

Question

I'm struggling to find the right way to use Angular -Strap modal / aside with a controller.

Yes, the calling code can enter $scope , making it accessible to the modal. But there are problems with this.

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

});

This will pollute the calling controller with potentially modal methods and properties.

I usually use "controllerAs" and therefore don’t even have $scope to insert into the modal system in the first place!

You can create a new $scope and then insert methods into it, but again, which will require entering $scope into the parent controller. Bad bad bad.

If I use ng-controller inside a modal template, I may have my controller. But it gives me another problem: now I can not enter data into the modal controller, and my call code cannot know when the modal object is closed, and returning data from the modal object also becomes a chorus (includes factory only for synchronizing the data of the parent and child controller).

I am really afraid of how to do this in the best way.

Any ideas?

Greetings

Refresh

Here's how I do it now:

In my template, I make a directive that opens modal. Example:

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

Thus, basically the directive calls my modal mode, and when the modal closes or wants to return with the result, it calls the method specified in the directive parameter.

Here's what the directive would look like:

 (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

Just use the 'controller' option:

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

Here plnkr

Answer 2

You can also try:

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

In this case, your modal dialog will have the scope of anyCtrl controller. In the template, you can simply use vm.title or other properties that are defined in the controller.