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

Does Vuex dispatch from within a component include a particular type of behavior known as a "promise"?

Currently, I am diving into vuex and facing an issue. During the created() lifecycle hook, my goal is to fetch data from an API. Once this action is complete, I need to call a getter from the component and assign the retrieved cards to the component's ...

javascriptvue.jspromiseaxiosvuex

The issue arises when Angular routing fails to locate the Django template files

I have been working on a project that involves utilizing Django along with AngularJs routing. Within my URL configurations for Angular routing, I have the following code: app.config(function($routeProvider) { $routeProvider .when( ...

angularjsdjangodjango-templatesangularjs-routing

Display animated GIFs in the popular 9Gag format

Is there a way to display a GIF file after clicking on a JPG file, similar to the functionality on 9Gag.com? I am currently using timthumb.php for displaying JPG images. https://code.google.com/p/timthumb/ Below is the code snippet: <div class="imag ...

javascriptphpjquerycss

When making an Axios API request in Next.js, an error is encountered stating that the property 'map' cannot be read as it is undefined

Hey there! I've been trying to fetch data from the API endpoint in my NextJs application using axios. However, whenever I try to map over the retrieved data, NextJs keeps throwing the error message "TypeError: Cannot read property 'map' of ...

javascriptaxiosnext.js

The code in check.js causes a square of dots to emerge on the screen in Skype

Trying to add a Skype call button to my page has been successful, but there's one issue - a pesky white dot keeps appearing at the bottom of the footer. The script source I used is as follows: <script src="http://download.skype.com/share/skypebu ...

javascripthtmlskype

Tips for replacing spaces with &nbsp; in a string using ReactJS and displaying it in HTML

<div className="mt-2 font-sidebar capitalize"> {item.title} </div> item.title can vary and be any string retrieved from the backend, such as "all products", "most liked", "featured items", etc. I am looking for a solution to subst ...

javascripthtmlreactjsstringnext.js

The iPad Air 2 experiencing issues with rendering on three.js

Recently, I've transitioned to using an iPad Air 2 for work and decided to explore equirectangular panoramas. While these panoramas work perfectly on my desktop, I was excited about utilizing the device orientation features on my iPad/iPhone. However ...

javascriptipadthree.js

The output from the lodash sortBy function is not aligning with the anticipated result

Sorting this array based on the attributes age and user has become my current challenge. The priority is to first sort by age, followed by sorting by user. In cases where the ages are the same, the sorting should be done based on the user attribute. var us ...

javascriptarrayssortinglodash

Why is my client program not receiving a response from this socket.io server?

Currently, I am in the process of developing a trivia game where two users engage in answering questions with the winner being declared at the end. As part of this project, I have integrated socket.io to facilitate the exchange of answers. However, I have ...

javascriptjqueryhtmlcsssocket.io

What causes the occurrence of "undefined" after multiple iterations of my code?

I've encountered a curious issue with the code snippet below. Everything seems to be running smoothly except for one thing - after a few iterations, I start getting "undefined" as an output. You can test this for yourself by running the code multiple ...

javascriptfor-loopundefined

Sort an array of strings alphabetically, including numbers (as strings), in order

After using the orderBy: toString() method, I arranged the values of the array below: Array: ["Susan","1","121","Adam","11"] However, the result turned out to be: Adam Susan 11 121 1 I was looking for this order instead: 1 11 121 Adam Susan Here is t ...

angularjsangularjs-filterangularjs-orderby

Problem with the $http module in Angular 1.2

Recently, I started incorporating Angular 1.2.0 into my development application and encountered an issue with a particular function not working as expected: var myItems = angular.model('myItems', []); myItems.controller('itemsController&ap ...

javascriptangularjs

The module in the relative path cannot be located by Node.js

Node.js is giving me some trouble with exporting and importing classes from multiple files. In one file, I have two classes that I'm exporting using the following code: module.exports = {TrigInter, Hilbert}; However, when I try to import these classe ...

javascriptnode.js

How can you enhance the visibility of AngularJS Materials dropdown menus?

While experimenting with AngularJS Materials, I noticed that the text in some elements like <md-input-container> and <md-select> may be too light for some people to read easily. I wanted to find a way to make the text more visible without chang ...

javascripthtmlcssangularjs

Utilize React's Context Provider to centrally manage all state while incorporating async calls

I am currently exploring more refined methods to establish a provider/consumer setup in which an asynchronous call is initiated from the provider, but the consumer does not need to handle state management. Within my context provider, I am fetching data to ...

javascriptreactjs

Is it possible to retrieve a static resource within server-side code in NextJs?

Exploring the static render feature of NextJS to generate a static version of my website has led me to ensure that all necessary data is provided for the initial page render. I have stored several blog posts as .md files in /static and aim to access them ...

javascriptnode.jstypescriptnext.js

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

Angular js Website Workflow

I am in the process of developing an E-commerce platform similar to Amazon.com. I find the services and guidelines offered by Angular Material to be quite inspiring. However, I am relatively new to web technologies and while I have a decent understanding ...

angularjsangular-material

In search of grabbing an image from a list item and relocating it to sit before the division tagged with class "event-title"

I am struggling with selecting each list element within the ul and moving the image inside the div class="event-details" above the div with the class="event-title". This adjustment is necessary for achieving the desired styling since the wordpress Event pl ...

javascriptjquerywordpress

What causes data to be undefined when sending it to PHP through AJAX?

this is the javascript code snippet I wrote var ActivityType ='d'; var TotalActivities = 2; function marker(ActivityType,TotalActivities) { var dataTosend='typ='+ActivityType+'&total='+TotalActivitie ...

javascriptphpjqueryajax