Observing the closing of a modal window from a different controller in AngularJS

Within my main controller, I have a function called $scope.showDialog:

$scope.showDialog = function(ev) {
    $mdDialog.show({
      controller: 'DialogController',
      templateUrl: 'partials/dialog.tmpl.ejs',
      targetEvent: ev
    })
};

In my dialog controller, I have a function called $scope.hide:

$scope.hide = function() {
    $mdDialog.hide();
};

(The dialog directive I'm using is from angular material). Is there a way for the main controller to detect when the dialog window is closed?

javascriptangularjs

Answer №1

To make use of the promise that is returned by the mdDialog, follow these steps:

 $mdDialog.show({
      controller: 'DialogController',
      templateUrl: 'partials/dialog.tmpl.ejs',
      targetEvent: ev
 }).then(function(response) {
      // Handle when dialog is closed with $mdDialog.hide()
 }, function() {
      // Handle when dialog is canceled with $mdDialog.cancel()
 })

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

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

javascriptarraysjsontypescriptfiltering

Using Jquery to attach an event to a particular div which is part of a group of divs sharing

I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example: <div class="container"> <div class="menu"><p>Text ...

javascriptjqueryhtmlcssevents

ajax: ensure utf-8 encoding is applied

I am facing an issue with my webpage that is saved in UTF-8 encoding. In the head section of the HTML document, I have defined it as follows: <meta charset="utf-8" /> Within an external JavaScript file, there is a function called ajax_db() which ma ...

phpjavascriptajaxutf-8

Localization support is working partially in a Node Express application that uses Handlebars for templating

Whenever I visit a URL with the ?lang=en query parameter, the English translation is never used. However, the Hungarian text changes work perfectly fine, displaying text to test on Hungarian in the default "hu" language without any issues. What could be ca ...

javascriptjsonnode.jsexpressinternationalization

How is it possible that my form is able to save data into the database even without any

I am considering adding a captcha process to my form and I am brainstorming some logic for it. I downloaded a login from Google, but I am confused why my form is still storing data into the database using action=' ' instead of action="register.ph ...

javascriptphpjquerymysql

Trouble triggering hidden radio button in Angular 9 when clicked

I have implemented radio buttons within a div with the following CSS styles (to enable selection by clicking on the div): .plans-list { display: flex; justify-content: center; margin: 2rem 0; .plan { display: flex; margin: 0 0.5rem; p ...

javascriptcssangular

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

javascriptangularjs

What is the best way to iterate through array elements with AngularJS?

I am looking to showcase array values using the ng-repeat directive, and then call the getimage function with itemid and photoidlist in order to retrieve the image URL. The JSON data that I have is as follows: $scope.productslist = { "json": { "re ...

javascriptangularjsarraysjsonangularjs-ng-repeat

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

javascriptjqueryhtmlformsfunction

Leveraging Vue.js to preload data with client-side rendering

When it comes to server-side rendering in Vue, like with Nuxt, the process involves grabbing data using the serverPrefetch() function and rendering content on the server side. This allows for the request to return data to the user only after the initial do ...

javascriptvue.jsserver-side-rendering

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

Here is the code for a dropdown menu: <select id="dropdown"> <option value="">Go to page...</option> <option value="http://stackoverflow.com">CSS-Tricks</option> <option valu ...

javascriptjquerycssxhtml

Endless loading on NodeJS server local host

My NodeJS setup is serving files, but the page seems to be stuck loading. Here's a snippet from my index.js file: const express = require("express"); const path = require("path"); const http = require("http"); const socke ...

javascriptnode.jsexpress

AngularJS: handling multiple asynchronous requests

When I make multiple ajax calls in my code, I noticed that the API is only reached after all the ajax calls have been executed. Below you can see the JavaScript code: function test = function(){ var entity = {}; entity.Number = 1; ...

javascriptajaxangularjspostasynchronous

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

Convert radio input and label into a clickable URL text

Apologies for my lack of experience. I am simply trying to wrap my head around something. <span class="button"> <input type="radio" id="button-2" name="button-group-1"> <label onclick="changeButton('2');" f ...

javascriptformsonclick

Assign a temporary value to the Select component in Material UI version 1.0.0-beta.24

I am currently working on a test project using Material UI v1.0.0-beta.24, and I have noticed that the "Dropdown" menus behave differently compared to the previous version. What I am trying to achieve is setting up a placeholder in the Select component. P ...

javascriptreactjsmaterial-ui

Error: The post request was blocked due to cross-origin restrictions

This is my unique script /** * Created by caneraydin on 16.03.2016. */ /** * Created by caneraydin on 16.03.2016. */ /** * Created by caneraydin on 16.03.2016. */ /** * Created by caneraydin on 16.03.2016. */ var app=angular.module('todoApp ...

javaangularjsjsonspring

Navigate to an element with a specific ID using JavaScript

How can I implement scrolling to an element on a webpage using pure javascript in VueJS with Vuetify framework? I want to achieve the same functionality as <a href="#link"></a> but without using jQuery. My navigation structure is as follows: ...

javascriptvue.jsvuejs2vuetify.js

Tips for saving a Cytoscape.js diagram as an image

Currently, I am diving into learning Cytoscape.js. After successfully creating an HTML file with a basic graph, I attempted to export the graph to an image using the following code: var png64 = cy.png(); // Inserting the png data in an img tag document.qu ...

javascriptconsole.logcytoscape.js

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

javascriptphpcsswordpressplugins