AngularJS - open controller in a dialog (template loaded dynamically)

Question

I'm playing around with AngularJS. I'm using a controller and a templateUrl to have things done automagically :) Currently the layout has only <div ng-view></div> directive into which all the things are loaded.

I'd like to open the modal (Bootstrap or jQuery UI, doesn't matter) and load there (inside a modal's body) the controller specified by given link.

Just like every link "opens" (loads the template & does all the DOM compilation & linking) inside my main ng-view, I'd like some of the links to open inside the modal.

I've checked out what AngularStrap and Angular-UI Bootstrap has to offer, and neither of them has what I'm looking for.

AngularStrap can obtain new partial template, but doesn't execute the new controller.

Is there any solution / snippet that executes the second controller inside Modal/Dialog?

Answer 1

Here's a plnkr that demonstrates using the angular + ui-bootstrap to launch a dialog with it's own template and controller.

It sounds like you are a bit confused about the relationship between a controller and the DOM. The controller doesn't live inside the DOM, in fact, we are trying to keep the 2 things distinct. Rather, the DOM is associated with a $scope which is controlled by a... (you guessed it...) controller.

So, in the example, the controller is loaded when the dialog elements are added to the DOM, but, the controller isn't "opened in the dialog" in any meaningful way. The dialog could just as easily use the same controller that the main app is using, by replacing "DialogCtl" with "DemoCtl" on line 17 of the demo. What I'm trying to say is that the controller, and the dialog are independent. Dialogs aren't executing controllers, rather, they are consuming $scope manged by one.

UPDATE: I just found out the example is a bit buggy, if you dismiss the dialog and then try re-opening it, the modal is displayed but not the dialog. I'm trying to sort that out now, i'm not really sure what's going on...

UPDATE 2: I think the inability to reload the dialog has to do with template caching. In this plnkr you see that I add a 'cache buster' onto the querystring, and the dialog reloads, but the modal backdrop doesn't. The example on the ui-bootstrap page can be loaded & reloaded without issue, but they are using a hard-coded template (rather than a template url). I wasn't able to get that working in plnkr either. Oh, the joys of working on the bleeding edge :-/

UPDATE 3: I can't figure out what's going on, but posted this question for help Opening the same dialog multiple times with $dialog

Answer 2

It seams, that the $dialog directive is not present in the current version of ui-bootstrap. http://angular-ui.github.io/bootstrap (0.11)

An alternative directive could be modal: http://angular-ui.github.io/bootstrap/#/modal

Here is a Plunker to see, how it works. http://plnkr.co/edit/?p=preview

Answer 3

$mdDialog.show({
                locals: {alert:"message"},
                controller: DialogController,
                templateUrl: 'apps/sidebar/views/dialog1.tmpl.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true
            })