Opening a controller in a dialog using AngularJS with dynamically loaded templates

Experimenting with AngularJS has been a fun experience for me. I've been using a controller and a templateUrl to handle everything seamlessly :) At the moment, my layout consists of just the <div ng-view></div> directive where all content is loaded.

I am interested in opening a modal (whether it's Bootstrap or jQuery UI) and loading the specified controller inside the modal's body. Similar to how every link opens and loads the template inside my main ng-view, I want certain links to open inside the modal.

After exploring options with AngularStrap and Angular-UI Bootstrap, I couldn't find exactly what I needed. AngularStrap is able to obtain a new partial template, but it doesn't execute the new controller.

Does anyone know of a solution or snippet that can execute a second controller inside a Modal/Dialog?

javascripttwitter-bootstrapangularjsangularjs-directivejavascriptmvc

Answer №1

Check out this demo showcasing the use of angular + ui-bootstrap to trigger a dialog with its own template and controller.

It appears there may be some confusion regarding the relationship between a controller and the DOM. Remember, the controller does not exist within the DOM itself. Instead, the DOM is linked to a $scope that is governed by a controller. In the given example, the controller is loaded when the dialog elements are added to the DOM, but it's important to note that the controller operates independently from the dialog. The dialog could easily utilize the same controller as the main app by simply making a change in the code. The controller and the dialog remain separate entities. Dialogs do not directly execute controllers; they interact with the $scope managed by one.

Update: After some testing, it seems there might be a bug in the example. When dismissing the dialog and attempting to reopen it, only the modal is displayed without the dialog. I am currently investigating this issue to understand what might be causing it.

Update 2: It seems that the problem with reloading the dialog could be related to template caching. In another demo, I added a cache buster to refresh the dialog content, but the modal backdrop fails to reload. The example on the ui-bootstrap page works smoothly with loading and reloading, possibly because they use a hardcoded template instead of a template URL. I encountered challenges replicating this behavior in the demo environment. Working on cutting-edge technology can be quite a challenge.

Update 3: Despite my efforts, I am still struggling to resolve the issue. Seeking guidance, I have posted a question on Stack Overflow for assistance: Opening the same dialog multiple times with $dialog

Answer №3

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered: Vue js and d3 data visualization error - "d3 is not defined"

I am attempting to showcase a .json file as a treemap by using npm run dev. I thought I had everything set up correctly but it appears that an issue is arising. Below is my App.vue code: <template> <div id="app"> <title> { ...

javascriptvue.jsnpm

What is the process behind Stackoverflow's "Congratulations, you've earned a new badge" popup window?

Possible Duplicates: Custom notify box similar to StackOverflow Creating popup message like StackOverflow How does StackOverflow implement the "You earned a new badge" window? (the orange one that pops up at the top of the screen, I believe it&ap ...

javascriptajaxnotifications

Transferring a JavaScript array over to PHP

I am dealing with a situation where I have a list stored in a PHP file like this: <ul id="alist"> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> By using jQuery, I have successfully captured that ...

javascriptphpjqueryajax

Utilizing the `theme` property in makeStyles with Material-UI

I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes o ...

javascriptcssreactjsmaterial-ui

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

javascripthtmlcss

Error with Webdriver/FXDriver utils.js leading to Firefox unresponsive script issue

While running browser tests with Watir webdriver and FXDriver, everything seems to be functioning well except for one test that loads a lightbox containing a large amount of HTML. When this lightbox opens, Firefox displays a popup indicating that Utils.js ...

javascripttestingwatirwebdriverwatir-webdriver

The object FormData cannot be instantiated as a constructor

I'm currently facing an issue while trying to create an AJAX request to upload an image. The problem arises when I attempt to initialize the FormData object. The error message in my console states: "dataForm is not a constructor". Any ideas on how I ...

javascriptjqueryajaxconstructor

Improving Zen Coding to integrate with JavaScript files on Sublime Text2

Sublime Text2 is hands down my go-to editor, except for one minor hiccup - the Zen Coding plugin only works with CSS and HTML files. There are plenty of times where I'd love to use Zen Coding with JavaScript or other file types, like incorporating HTM ...

javascriptsublimetextemmet

How can a child class access this.props within a function that overrides a parent class's function?

I am trying to access this.props.childName in the child function, which is defined within the parent function. However, I am encountering a TypeScript compile error (Property 'name' does not exist...). Strangely, if I use this.props.parentName, i ...

javascriptreactjstypescript

Using a For Loop in VueJS with TypeScript for an array of objects

I'm currently working on a for loop within an object array. Below is the code snippet I am working with: private async rightsOverview() { let item: any[] = []; const prod = await fetchFromApi<ProductionBaseType>(`/productions/${id ...

javascripthtmltypescriptvue.jsvuejs2

The Angular JS field will only be considered valid if its value is more than zero

I have a text box in my form that changes its value dynamically when a user selects a category from a dropdown menu. Initially, the value is set to 0. $scope.validCats = "0"; HTML: <input ng-model="validCats" value="" type="text" class="form-control ...

javascriptjqueryangularjsvalidation

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

javascripthtml

Equal height elements - Bootstrap

Is there a way to make all elements in a list the same height, even if one element has more text than the others? I've been using divs for this purpose, but I'm open to switching to li items. Any advice on the best approach? I'm currently w ...

htmlcsstwitter-bootstrap

Javascript event triggering twice

I have created this code snippet to showcase the issue I am facing. main.php <body> //some html <script> function fx1(){ $(".elem").click(function(){ alert("hello"); }) } </script> //some html again include sub-acc.php & ...

javascriptjqueryjquery-mobilejquery-events

The dropdown feature does not activate when the checkbox is selected, leading to the dropdown remaining disabled

I'm attempting to make a dropdown menu active when a checkbox is selected. However, when I try to do so... it doesn't seem to be working. Can someone provide assistance with this issue? HTML : <label class="checkbox-inline"> ...

javascriptphpjquerytwitter-bootstrapisenabled

Sending an Array from JavaScript to Asp.net Core

Below is the javascript code that invokes the asp.net CustomHeatMapDate function $('.Date').change(function () { var data = []; console.log(); var dateList = [{"Date":"03/23/2016"}, {"Date":"03/24/2016"}]; $.ajax({ async: ...

javascriptasp.net

Error encountered during webpack development build due to syntax issues

Having trouble building a project with webpack due to persistent syntax errors? It seems like when your friend runs the same code on Linux (while you're working on Windows 10), everything works fine without any errors. Here is the configuration for m ...

javascriptnode.jswindowsnpmwebpack

`The challenge of a single web page not displaying correctly`

I was working on a website for a local computer building company, and I decided to make it a single-page applet. The HTML is mostly done, and I don't have much trouble with CSS. However, I encountered an issue with hiding and displaying different sect ...

javascriptjqueryhtml

Unable to execute script tag on PHP page loading

When I make an AJAX request to fetch JavaScript wrapped in <script> tags that needs to be inserted on the current page, how can I ensure that the code executes upon insertion? Here's the snippet I'm using to add the code: function display ...

javascriptphphtmlajax

Sign-in options displayed in a drop-down menu

I have successfully implemented a jQuery animation for a dropdown sign in div. The sign up form is integrated with PHP to verify the existence of users in the database. However, I came across an issue where if I echo something, the dropdown menu disappears ...

javascriptphpjquery