Show a dynamic modal with a widget displayed inside

I am facing an issue with my Angular.js website that is filled with a multitude of widgets. Each widget consists of a template.html file paired with a controller.js file to form an angular module.

These widgets are utilized on a dashboard where users have the ability to rearrange them, and they may also need to appear in modal popups. Additionally, other tools may want to integrate with our site by pulling these widgets into their own platforms.

Currently, we have a total of 26 modals set up, with more being added regularly.

I'm looking for a way to create modals dynamically so I don't have to manually include them on every page. Is there a method to make these modals global? Furthermore, I need to be able to load a widget (template and controller) into the module, as all modules follow the same structure but may require customized headers, bodies, and footers.

Typically, I would convert these widgets into directives, but my team has already implemented them on the dashboard.

P.S. We are utilizing $stateProvider and Angular-UI Bootstrap modals for our project.

javascriptangularjstwitter-bootstrapangular-ui

Answer №1

To streamline this process on a global scale, consider setting up a service that handles modal functionality. This way, you can pass all necessary parameters to the modal for it to function effectively. Here is an example of how you could achieve this:

.service(metadata.componentName, [
        '$modal',
        '$q',
        function($modal, $q) {
            return {
                confirm: function showConfirmModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body">' + options.message + '</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
                            controller: modalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                },
                info: function showInfoModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body"> <button type="button" class="close" ng-click="ok()"><span>×</span></button>' + options.message + '</div>',
                            controller: timeoutModalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                },
                error: function showErrorModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body"> <button type="button" class="close" ng-click="ok()"><span>×</span></button>' + options.message + '</div>',
                            controller: timeoutModalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                }
            };
        }

These modals are kept simple intentionally. When using templateUrl instead of template and passing in your own controllers, ensure you follow requirejs syntax for controller handling. To utilize these modals, call yourService.whateverModal with the necessary parameters. You can also customize additional settings for the bootstrap-ui modal within that service call if needed.

One more note - I have enclosed these functions in $q so that you have the flexibility to utilize the promise when invoking this modal service. For instance, this can be useful for triggering different events upon closing or canceling the modal.

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 with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

Step-by-step guide on how to display chosen values in a multi-select dropdown menu

How can I dynamically select values in a multi-select box based on an array using Vue.js? I've attempted a solution but it's not working as expected. Any suggestions or help would be greatly appreciated. <div id="app"> <select class="m ...

javascriptvue.js

Divergent outcomes observed in various browsers when fetching XMLHttpRequest responseText

Utilizing XMLHttpRequest responseText to retrieve a server txt file and populate the contents of that file into an editable text box has been my recent task. The txt file consists of concise lines of letters separated by new lines. Users have the option to ...

javascripthtmlajaxinternet-explorerget

Receive immediate updates of the text input in real-time using the onkeydown event handler in Javascript

I attempted to display the content of the input box in a message div simultaneously, however, the output always seems to be one step behind. function showWhatsWritten(){ var tempText; tempText = document.getElementById("text").value; document.getEle ...

javascript

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

I am currently developing a directive for AngularJS. How can I specifically configure it to require being a child of directiveA? For instance, consider the following example: <my-modal> <m-header>Header</m-header> </my-modal> ...

javascriptangularjs

"Exploring ways to pass live data from the controller to the view in CodeIgniter for dynamic chart values

I currently have the following code where I am statically assigning values. Now, I need to dynamically retrieve values and display a chart. I want to populate the 'items' variable from the controller in the same format, and then display the chart ...

javascriptajaxcodeigniter

I'm having trouble retrieving my variable within the socketcluster's socket.on function

How can I store the value of msg in the variable sample when sample is not accessible inside the callback function? import { Injectable } from '@angular/core'; import * as socketCluster from 'socketcluster-client'; @Injectable({ pro ...

javascriptangulartypescriptsocketcluster

Using Jquery to extract URL parameters

Can anyone suggest a jQuery function I can use to fetch URL parameters? I've been utilizing the following function, which works well; however, it encounters issues when the URL doesn't have any parameters. I would like it to return an empty stri ...

javascriptjquery

What is the best way to utilize the $('input').on('change', function() method within AngularJS?

I am working on creating a registration form page using AngularJS and I need to display the percentage completed. The form consists of over 50 fields, so I am looking for a simple way to implement this functionality. Below is a snippet of the code I have ...

javascriptangularjs

Do we always need to use eval() when parsing JSON objects?

<!DOCTYPE html> <html> <body> <h2>Creating a JSON Object in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Evaluated Name: <span id="evalname"></span><br /> <p> <s ...

javascripthtmljsoneval

Unexpected behavior detected with vue.js

I'm having some trouble with my vue.js code. When I try to run this example, the output in the browser is showing "product" instead of "Boots". <div id="app"> <h2>{{product}}</h2> </div> <script src="https://unpkg.com/& ...

javascriptvue.js

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

Currently, I am deep into a project that involves Svelte 3 and Electron 12.0.5 working together harmoniously. For managing hash routing, I have integrated the svelte-spa-router package into my setup. Here is a glimpse of how my project structure appears: n ...

javascriptnode.jselectronsvelte-3

How to Use an Array to Filter Another Array in AngularJS

After attempting to filter a group of checkboxes using an array, the outcome was not what I expected: <ion-checkbox ng-repeat="user in users | filter: {id: group.members}" ng-model="user.checked">{{user.info.name}}</ion-checkbox> The specific ...

arraysangularjsfilterionic-framework

How to eliminate a particular validator from a form group in Angular

My goal is to eliminate the specific validator from the validator array so that I can reconfigure the controls when certain values have changed. I am aware of the traditional solution where I would need to repeatedly set validators. checked(event: MatC ...

javascriptangulartypescriptangular-reactive-forms

What is the best way to update a collection item while maintaining non-existing values in the query?

Consider this straightforward example, where an item is saved as: { "test": { "a1": "a1" } } When collection.updateOne is called with $set and the following object: await collection.updateOne(doc, {$set: {"test&q ...

javascriptmongodbmongodb-query

Setting up Material-UI for React in conjunction with Typescript: A step-by-step guide

I've encountered issues while trying to integrate Material UI into my React project that's written in Typescript. Following the tutorial, I began by adding the react-tab-event-plugin. import injectTapEventPlugin from 'react-tap-event-plugi ...

javascriptreactjstypescriptmaterial-ui

Is memory allocated for 32 bits for variables with an undefined value in Javascript?

If I have a function with the signature below: function test(variable1, variable2) {} And I call it with only one parameter: test(5); Then within the test function, variable2 will be created but with a value of undefined. I'm interested to know if ...

javascript

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

javascriptjqueryhtmlcss

Enhance the Angular KendoGrid excelExport feature with a custom column addition event

When utilizing the excelExport event in KendoGrid to modify certain column data before exporting it, is there a way to insert a new column between two existing columns? Here's the current code I'm using to manipulate dates. I would like to add a ...

javascriptangularkendo-uikendo-gridexport-to-excel

Reorder the Polymer dom-repeat element following a modification in the child component's value

My Polymer dom-repeat list is working fine on the initial value sorting for the children. However, when I update a value within a child element, the sort order of the list does not reflect the changes. What is the best way to achieve this? <body> ...

javascriptsortingpolymerdom-repeat