Unable to open a modal in Angular UI after closing the initial modal

Hey there! I've been attempting to open a modal after closing the first one, but I'm encountering an issue where the second modal appears to be opened but is actually not. I'm struggling to understand what's causing this problem. Could someone lend me a hand, please?

Here's a snippet from myController.js:

$scope.detailsPdt = function(pdt, size)

        {
            $scope.cancel();
            $scope.pdt = pdt;

            $rootScope.modalInstance = $uibModal.open({
                animation : $scope.animationsEnabled,
                templateUrl : 'partials/detailsProduct.html',
                controller : 'ProductsController',
                size : size,
                scope : $scope,
                resolve : {}
            });
        }
javascriptangularjstwitter-bootstrap

Answer №1

The issue you're facing is that the first modal remains open when you attempt to open the second one.

To resolve this, you'll need to close the first modal and transfer its data to the second one as follows:

The first modal can be triggered from various sources (HTML or controller). Then, in myController1, close the first modal. In modalInstance.result.then(), proceed to call the second modal.

$scope.openSecondModal = function(size, data){

    var modalInstance = $uibModal.open({
    templateUrl: 'templates/mytemplate2',
    controller: 'myController2',
    size: size,
    resolve: {
        data: function(){
           return data;
        },

   });
   modalInstance.result.then(function(data2){


   });
};


$scope.openFirstModal = function(size){

    var modalInstance = $uibModal.open({
    templateUrl: 'templates/mytemplate1',
    controller: 'myController1',
    size: size,
    resolve: {

        }
    });
    modalInstance.result.then(function(data){
        if(data){
            //call the second modal
            $scope.openSecondModal('lg', data);
        }
    });
};

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

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

javascripthtmlarraysjsoncrud

Is it possible to execute custom Javascript code when navigating forwards or backwards on a webpage?

My main goal is to recreate the back button functionality using AJAX without needing to add #uglyhashes to every URL, as many solutions currently do. (Just to clarify, I am completely okay with a solution that doesn't support Internet Explorer at all ...

javascriptajaxback-button

tips on setting the time format in dimple.js

Trying to create a multi-line graph using dimple.js based on some sample code. I have flattened my JSON into an array and thought I had the code down, but I'm stuck. I am including these 2 libraries (using cloudflare dimple for security reasons): &l ...

javascriptjsond3.jsdimple.js

Choose particular ng-repeat elements to emphasize them in a different location

I am currently working with a list that is being parsed by an ng-repeat directive. The user has the ability to filter this list, which is functioning correctly. One particular feature I am trying to implement is highlighting the first item in the filtered ...

angularjs

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

Ways to identify input that has been altered dynamically

I'm currently trying to figure out why I can't seem to detect any input changes with the code snippet below: $("#fname").on("change", function () { console.log("The text has been changed."); }); $("button").o ...

javascriptjquery

Ways to extract the final digit from a format such as an IP address in JavaScript

Is there a way to retrieve the last digits 192.168.1.180 For instance: From the IP address 192.168.1.180, I would like to extract 180. Thank you in advance ...

javascripttypescriptangular6

Tips for Retrieving Data from a Multi-Dimensional Array

I need help accessing the values in my array and assigning them to variables for later use. I have created an array and used the randomGo() function to generate a random number that corresponds to a pair of numbers within the array. My goal is to assign ...

javascriptarrays

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

I am currently engaged in developing a straightforward application that coordinates multiple web components. Among these components, there is one that contains a setInterval function. Interestingly, the function continues to run even after the component it ...

javascripttypescriptsetintervalweb-component

Display the option to "Delete" the link only when there are multiple images in my image collection

I am using jQuery and Ajax to remove banner images from my website. However, I want to make sure that if there is only one image left, it cannot be deleted. Each image in the list has a corresponding delete link: echo '<a class="delete j_bannerd ...

javascriptjqueryajax

"After refreshing the page, the .load() function did not run as

After loading the page and adjusting the viewport size, I am trying to retrieve the dimensions of images. While I can successfully get image dimensions after the page loads using .load, I am struggling to find a way to update the image sizes when the viewp ...

javascriptjquery

Steps for creating a basic table filter using jQuery

What is an efficient way to create a basic table filter using jQuery without pagination requirements? I want to retrieve data from a database and display it as a list. I would like to avoid using plugins and instead opt for concise code snippets. For ...

javascriptfilterjqueryjquery-effects

Assigning a session variable through a dropdown selection

Currently, I am working on a custom WordPress theme that involves setting a session variable based on the value selected from a dropdown box. This session variable is then used to determine which container should be loaded. The code snippet below shows whe ...

phpjavascriptajaxsession

Using Nuxtjs/Toast with personalized image emblems

Would it be possible to include an icon in a toast error message, or is there a need to install another module for this functionality? I am currently using vue and attempting to integrate a component as an icon, but so far without success. this.$toast.er ...

javascriptvue.jsnuxt.js

What is the process for invoking a NodeJS script within a personalized VSCode Extension?

Recently, I created a NodeJS script for one of my projects and now I'm looking to develop a VSCode extension around it. How can I integrate this script as a command within my custom extension? The goal is to have the script packaged along with the e ...

javascriptnode.jsvisual-studio-codenpmvscode-extensions

Locating items within a complex array and identifying their corresponding positions

I recently found an interesting code snippet from a different question that allowed me to identify an object. However, I am now faced with the challenge of determining the position of that object within the array. Let's take a look at the example belo ...

javascript

Transforming a Nestjs string object into JSON data

I need to convert this to JSON format. I attempted to use JSON.parse(), but encountered an error. "{"status":"00","message":"OK","access_token":"2347682423567","customer":{"name":"John Doe","address":"Mr. John Doe 34 Tokai, leaflet. 7999.","util":"Demo Ut ...

javascriptnode.jsjsonnestjs

Example of fetching Pubnub history using AngularJS

I am not a paid PubNub user. I am utilizing the example code for an Angular JS basic chat application from PubNub, and I want to access the chat history. This specific example can be found on the PubNub website. git clone https://github.com/stephenlb/an ...

javascriptangularjspubnub

Exploring the dynamic duo of AngularJs, Jboss, and the security

If you were to explore JBoss security framework as a potential solution for enabling JAAS using JBoss 6 and creating the web.xml file to configure JAAS security for protecting a Rest API: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns: ...

angularjsjbossjaas

Eliminate repetitive elements from an array using a specific merging algorithm

Here's a thought I have: If we have an array of objects like this: [ { "name": "Kirk", "count": 1 }, { "name": "Spock", "count": 1 }, { "name": "Kirk", "count": 1 } ] I would l ...

javascriptalgorithmmergehigher-order-functions