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?

Solution

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

Comments

[migajek]

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.

[DusanV]

that was bogus code, i deleted it. it was unnecessary and wrong, i'm still not sure why the dialog wont' relaunch though...

[Ravish]

@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 <a>

[Peter V. Mørch]

I've created an updated plunker with href="" instead of href="#" and it can be re-opened now. (Got solution from angularjs - 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. Principle is still good, though.

[deFreitas]

@Jason I've updated to angular 1.4.8 and ui-boostrap 1.2.4 plnkr.co/edit/I354huESaeHKNNCuV7hk?p=preview

[deFreitas]

This plnkr url not exists here a example with new ui-boostrap plnkr.co/edit/I354huESaeHKNNCuV7hk?p=preview