Pass data from Angular UI Bootstrap Modal to parent controller upon background click or closing with the ESC key

Hello everyone.

Let's dive right into the issue - I am trying to figure out how to pass a variable back from an AngularJS UI Boostrap Modal when the user clicks on the background or presses the ESC button on their keyboard.

There are some solutions available to prevent the user from closing the modal prematurely, which you can find here: How do I prevent angular-ui modal from closing?

However, in my particular case, I believe preventing the user from doing so might actually cause them to get stuck. This is because there is only one button that triggers the action 

$uibModalInstance.close($scope.choosenLocationLatLng);
. Therefore, I am looking for a way to pass the variable back not just when the button is clicked, but also when the user clicks on the background or hits the ESC key on their keyboard, if possible.

javascriptangularjsangular-ui-bootstrap

Answer №1

One way to interact with the parent controller when closing a $uibModal is by capturing the closing event.

//main controller
var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: ['$scope','$rootScope', function($scope, $){
    //This goes in modal ctrl
    //----------------------------------------------------------
    $scope.$on('modal.hide', function(event, reason, closed){
           $scope.$on("modal.closing",function(){
           $rootScope.$broadcast("modalClosing",$scope.latLong);
     });
    }
    //---------------------------------------------------------
  }],
  controllerAs: 'modal',
  size: 'lg'
});
$scope.$on('modalClosing',function(value){
  //value is the latlong set in 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

Is the `visibility: hidden` property not functioning as expected?

I am trying to conceal the script for the photoset until it is fully loaded, but unfortunately the code below does not seem to be effective: JavaScript $('.photoset-grid').photosetGrid({ rel: $('.photoset-grid').attr("data-id"), gutte ...

javascriptjqueryhtmlcss

Tips on transforming JSON output into an array with JavaScript

Looking for a solution to convert a Json response into an array using JavaScript. I currently have the following json response: ["simmakkal madurai","goripalayam madurai"]. I need to transform these results into an array format. Any suggestions on how I ...

javascriptphphtml

Custom Sign-in features in NextJS now direct users to the default form for entering login

I have been working on a web app that requires authentication using NextJS default auth middleware. However, whenever I try to log in, the app redirects me to the default NextJS form component at the URL /api/auth/signin?error=CredentialsSignin. Even thou ...

javascriptreactjsauthenticationnext.js

Text input setting for jQuery UI Slider

Currently, I am utilizing jQuery UI sliders to input values in text boxes. However, I would like this functionality to be bidirectional; meaning if a value is entered into the text box, I want the slider to move to the corresponding position. I am unsure ...

javascriptjqueryjquery-ui

Creating a "Container" component in Vue.js step by step

As a newcomer to Vue, I am facing a challenge in implementing a wrapper component similar to React's 'Wrapper' component. Specifically, I want to create a reusable datagrid component using a 3rd-party some-table component and a pagination co ...

javascriptvue.js

Monitoring user logins based on user identification

How can I effectively monitor the activity of users who have logged into a web application that is managed by an external company? Despite my extensive research efforts, as a non-technical individual, I am struggling to understand how to utilize Google Ana ...

javascripthtmlweb-servicesgoogle-analyticsgoogle-analytics-api

Retrieve anchor elements from multiple HTML documents

I have a challenge that I'm not certain is achievable, but I am attempting to extract all anchor tag links from several HTML files on my website. Currently, I have developed a PHP script that scans various directories and subdirectories to create an a ...

phpjavascript

Tips for executing an npm command within a C# class library

I am currently developing a project in a class library. The main objective of this project is to execute a JavaScript project using an npm command through a method call in C#. The npm command to run the JavaScript project is: npm start The JavaScript ...

javascriptc#reactjsnpmclass-library

Switching from using jQuery to Mootools in a short script that helps to balance the heights of

I have a simple script that I frequently use in jQuery to make boxes equal heights. Now, I need to convert it to mootools for a new project where the boxes will be floated left at thirds using style sheets. <div id="box1" class="equals">content he ...

jquerymootoolsjavascript

The information is not being shown. Error: API expression GET is not possible

import express from 'express'; import data from './data'; const app = express(); app.get("/api/products", (req, res) => { res.send(data.products); }); app.listen(5500, () => {console.log("The server has been successfully s ...

javascriptreactjsapiexpressget

"Exploring the world of server-side and client-side MVC frameworks

I recently embarked on learning ASP.Net MVC and have encountered some puzzling questions regarding the MVC framework - particularly, whether it leans more towards client-side or server-side operation. I understand if these queries seem basic, but I'd ...

asp.net-mvcangularjs

Troubleshooting Problem with Retrieving Files Using jQuery Ajax

I am attempting to use ajax to retrieve the contents of a file, but it doesn't seem to be functioning properly. I'm not sure why this is happening, as I have copied the same code from the examples on w3schools.com. $().ready(function(){ ...

javascriptjqueryajaxfile

Encountering Server Error 500 while trying to deploy NodeJS Express application on GCP App Engine

My goal is to deploy a NodeJS app on gcloud that hosts my express api. Whenever I run npm start locally, I receive the following message: >npm start > [email protected] start E:\My_Project\My_API > node index.js Running API on por ...

javascriptnode.jsexpress

Discover the process of attaching an event to the keyboard display within a Cordova application

I've exhausted my efforts trying to figure out how to assign an event for when the virtual keyboard appears on my hybrid cordova app. I'm looking to trigger a specific action whenever the keyboard shows up in my app consistently. ...

javascriptangularjscordova

What is the best way to save a token value to a JavaScript file on my local storage

Hello, I am new to Nodejs and have implemented passportjs token-based authentication. When a user logs in, a token is provided for each user. Now, I want to perform certain operations based on the users who have token values. For example, if a user wants t ...

javascriptnode.jsexpresspassport.js

The selected option is not visually highlighted in the ui-select due to a programming issue

angular version: AngularJS v1.3.6 http://github.com/angular-ui/ui-select : Version: 0.8.3 var p1 = { name: 'Ramesh', email: '[email protected]', age: 99 }; $scope.people = [ { name: 'Amalie', ...

javascriptangularjsui-select2ui-select

Guide on sending files and data simultaneously from Angular to .NET Core

I'm currently working on an Angular 9 application and I am trying to incorporate a file upload feature. The user needs to input title, description, and upload only one file in .zip format. Upon clicking Submit, I intend to send the form data along wit ...

javascriptc#angulartypescript.net-core

Search form with a variety of fields that allows for searching without needing to repeat the component for each condition

I am currently facing an issue with my form that consists of multiple fields, each used to search through an API and display matching data in a table below. While I have successfully implemented this for one field, I now need it to work for all fields with ...

javascriptvue.jsvuejs2

Is it better to use Asynchronous or Synchronous request with XMLHttpRequest in the Firefox Extension for handling multiple requests

As a newcomer to developing Firefox Add-Ons, my initial project involves calling an external API in two steps: Step 1) Retrieve data from the API. Step 2) Use the data retrieved in Step 1 to make another call to the same API for additional information. ...

javascriptajaxfirefox-addonxmlhttprequest

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

javascriptphphtmlmysqldatabase