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

Unable to start store from localStorage during App initialization

Having trouble setting up my Vuex store with the logged-in user's account details from localStorage. I've looked at numerous Auth examples in Nuxt, but none explain how to retrieve an authToken from localStorage on the client side for subsequent ...

javascriptvue.jsvuex

Can someone explain to me how this AngularJS factory example functions? I have some uncertainty

As a beginner in AngularJS, I am currently studying it through a tutorial and have some questions regarding the use of the factory in Angular. From what I understand, a factory is a pattern that creates objects on request. In the example provided, we see ...

javascriptangularjsjsonjavascript-frameworkangularjs-factory

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss

Why is my Angular 2 service not showing up in my application?

Trying to access a JSON file using an Angular service has been unsuccessful. While I can easily read and bind the JSON data without the service, attempting to do so with the service results in an error message: Failed to load resource: the server responde ...

javascriptangularjsjsonangular

"Unlocking the JSON element with jQuery Ajax: A step-by-step guide

I am trying to pinpoint a specific element within my JSON data: { "taskMeta": "Some meta info", "tasksLib": [ { "task001": { "id":"1", "createDate":"01.02.17", "dueDate":"02.03.17", "au ...

javascriptjqueryjsonajax

How to insert a span element within a link tag in Next.js/React.js

Looking to create a breadcrumb using microdata in a Next.js and React.js project. Initially, I tried the following: <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index&a ...

javascriptreactjsnext.js

Develop a descriptive box for a radio button form using jQuery

I am working on creating a form with simple yes/no questions. If the answer is no, no explanation is needed. However, if the answer is yes, I want to insert a new table row and display a textarea for an explanation. To ensure data validation, I am utilizi ...

javascriptjqueryerror-handlingradio-button

How can you make each <li> in an HTML list have a unique color?

Looking for a way to assign different colors to each <li> element in HTML? <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Here's how you want them displayed: Item 1 should be red Ite ...

javascripthtmlasp.net

Comparing jquery ajax jsonp with angularjs $http json: A breakdown of two powerful ways

I have a scenario where I need to switch from using jquery to angularjs for a particular feature. Specifically, I am replacing jquery's ajax method with angularjs' $http method. This piece of code is responsible for enabling users to sign up for ...

jqueryangularjsajaxjsonpmailchimp

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Is it possible to access the ng-model from another ng-controller and if so, how can it be done? In this scenario, I am using two controllers. The first controller has a model called mddl1, while the second controller does not have any other model. However, ...

javascriptangularjs

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

javascriptc#htmljqueryjson

Fetching an image from Firebase Storage for integration into a Vue application

I am encountering an issue while trying to fetch an image from my firebase storage to display it in my Vue application. The upload process from the app to firebase storage runs smoothly, but there is an error during retrieval. My setup involves using the F ...

javascriptfirebasevue.jsfirebase-storagevuex

Having trouble getting the video to load on your Mozilla Firefox browser?

Unable to play video on Firefox. Error message: URL.createObjectURL(video): Error decoding media resource blob: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005) Details: Decoder may not support the requested video format with YUV444 chroma subsampling. Tried usi ...

javascriptnpm

"In a single line, add an item to an array based on a specified condition

I am trying to achieve something similar in JavaScript with a one-liner. Can this be done without using an if statement? // These versions add false to the array if condition = false let arr = await getArray(params).push(condition && itemToAdd); arr = awai ...

javascriptarrays

Ways to activate flashlight on mobile using React.Js

Is it possible to control the torch light of a mobile device by toggling a button? https://i.stack.imgur.com/x9nIf.png <IconButton onClick={() => setFlashOn(!flashOn)} style={{ position: "absolute", right: 80, top: 20, zIndex: ...

javascriptreactjsmaterial-ui

Generate a new entry by analyzing components from a separate array in a single line

I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...

javascripttypescript

Error: Incompatibility - The variable is not functioning properly in node.js or express.js

Upon encountering the error message "TypeError: undefined is not a function," I called a callback with parameters null, array_reply, and threadResults. It appears that this section of code is problematic, but I am uncertain why. Your assistance in resol ...

javascriptnode.jsexpresscallbacktypeerror

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

javascriptarraysangulartypescriptarraylist

"Utilize JavaScript to extract data from JSON and dynamically generate a

I'm currently facing an issue with reading JSON data and populating it in my HTML table. The function to load the JSON data is not working as expected, although the data typing function is functioning properly. I have shared my complete HTML code alo ...

javascripthtmljson

Generating random values from an array within an ng-repeat loop

I need to add 4 different classes to a div within a ng-repeat. <li ng-repeat="post in posts"> <span class="color-RANDOM-VALUE">{{post.title}}</span> </li> After setting up the loop, it should display like this: <li> ...

angularjsangularjs-ng-repeationic-framework