All geek questions in one place

AngularJS - open controller in the dialog (dynamic dynamic template)

I play with AngularJS. I use the controller and templateUrl so that everything is done automatically :) Currently, the layout has only the <div ng-view></div> directive, into which all things are loaded.

I would like to open a modal (Bootstrap or jQuery UI, it does not matter) and load there ( inside the modal body ) the controller specified by this link.

Like any link "opens" (loads the template and does all the compilation and linking of the DOM) inside my main ng-view , I would like some of the links to open inside the modal.

I checked what AngularStrap and Angular-UI Bootstrap have to offer, and none of them have what I'm looking for.

AngularStrap may receive a new partial template, but does not execute the new controller.

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

+2
source share
3 answers

Here's a plnkr demonstrating the use of angular + ui-bootstrap to launch a dialog with its own template and controller.

It sounds like you are a bit confused by the relationship between the controller and the DOM. The controller does not live inside the DOM, in fact we are trying to keep two things separate. Rather, the DOM is associated with $ scope, which is controlled by the controller ... (you guessed it ...).

So, in the example, the controller is loaded when the dialog elements are added to the DOM, but the controller does not "open in the dialog" in any meaningful way. In the dialog box, you can just as easily use the same controller as the main application, replacing "DialogCtl" with "DemoCtl" on line 17 of the demo. I am trying to say that the controller and the dialog are independent. Dialogs do not execute controllers, rather, they consume $scope , managed by one.

UPDATE: I just found out that the example is a bit wrong if you reject the dialog and then try to reopen it, the modal will be displayed, but not the dialog. I'm trying to figure it out now, I'm not quite sure what is happening ...

UPDATE 2: I think the impossibility of reloading the dialog is related to template caching. In this plnkr, you see that I am adding "cache bitter" to the request queue, and the dialog is reloaded, but the modal background does not work. The example on the ui-bootstrap page can be loaded and reloaded without problems, but they use a hard-coded pattern (not a URL pattern). I also could not get this job in plnkr. Oh, the joys of working on the brink of bleeding: - /

UPDATE 3: I can’t understand what is happening, but posted this question for reference Several times opening the same dialog with the $ dialog

+12
source

This means that the $dialog directive is missing from the current version of ui-bootstrap . http://angular-ui.imtqy.com/bootstrap (0.11)

An alternative directive might be modal : http://angular-ui.imtqy.com/bootstrap/#/modal

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

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

Source: https://habr.com/ru/post/1484652/

More articles:


All Articles