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?

score 12 · Accepted Answer · edited May 23 '17 at 12:16

12

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

edited May 23 '17 at 12:16

Community

1
1

answered Jun 02 '13 at 20:34

Jason

15,915
3
48
72

thank you! I'm trying to understand the demo now :) BTW, why is there ng-include="index.html" inside index.html? Maybe I was misunderstood, I know controller should be separated from the template, what I meant by "controlled opened in a dialog" is that the dialog content is not only a separate (partial) template, but also it has separate scope and is being executed under separate controller context (i.e. EditCtrl), so that I don't have to pollute ListCtrl logics with the "save" method which should belong to the EditCtrl, as I'd have to if I used ng-include directive. – migajek Jun 02 '13 at 20:51
that was bogus code, i deleted it. it was unnecessary and wrong, i'm still not sure why the dialog wont' relaunch though... – Jason Jun 02 '13 at 20:54
@Jason it seems there is no reliable way to make it work on IE. clicking on 'launch dialog' shows dialog twice, but, we get following error : *Error: 10 $digest() iterations reached. Aborting!* Now, if you clear browsers temp data and relaunch IE, it will work again (for 2 clicks), I've checked your 'UPDATE 3', that's working, but, not what's problem with – Ravish Sep 05 '13 at 12:35
I've created an updated [plunker](http://plnkr.co/edit/Yoa4pCHa5Umw5IC9hR1K?p=preview) with `href=""` instead of `href="#"` and it can be re-opened now. (Got solution from [angularjs - Opening the same dialog multiple times with $dialog](http://stackoverflow.com/questions/16941770/opening-the-same-dialog-multiple-times-with-dialog)). We should all beware though, that `$dialog` is gone from ui-bootstrap. Here is Dan Wahlin's workaround [creating `$dialog` from `$modal`](http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx). Principle is still good, though. – Peter V. Mørch Feb 20 '14 at 04:20
@Jason I've updated to **angular** `1.4.8` and **ui-boostrap** `1.2.4` http://plnkr.co/edit/I354huESaeHKNNCuV7hk?p=preview – deFreitas Mar 13 '16 at 13:41

score 0 · Answer 2 · answered Jul 30 '14 at 12:30

0

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

answered Jul 30 '14 at 12:30

The Bndr

13,204
16
68
107

This plnkr url not exists here a example with new ui-boostrap http://plnkr.co/edit/I354huESaeHKNNCuV7hk?p=preview – deFreitas Mar 13 '16 at 13:42

score 0 · Answer 3 · answered Jan 08 '16 at 11:04

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

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

3 Answers3

Linked