What is the best approach in AngularJS for implementing a browser modal that returns a promise?

How can I implement a custom modal in my code that allows me to perform an action only after the user clicks 'okay'?

var modalInstance = this.$modal.open({
   templateUrl: '/app/tests/partials/markTest.html',
   controller: ['$scope', '$modalInstance', 'testService', ($scope,  $modalInstance, testService: ITestService) => {
   $scope.cancel = () => {
      $modalInstance.dismiss('cancel');
   };
   $scope.ok = () => {
      testService.markTest()
         .then(() => {
            abc().then(() => {
               $modalInstance.close();
            })
         });
   $scope.tes = testService;
   }]
});

I want to achieve similar functionality to the modal on Stack Overflow that prompts users when leaving a page. Any suggestions on how to implement this with my current setup?

Your tips and advice would be greatly appreciated.

Answer №1

It's a straightforward answer - no, Window alert/confirm dialogs cannot work with promises because they are blocking by nature.

To incorporate promises into your code, you'll need to opt for an HTML or custom JavaScript solution such as the Angular dialog.

The main benefit of using Window.alert() is its blocking functionality. If you don't require this, then there's little point in using it.

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 way to exclude a particular character from a text element utilizing jquery?

Looking to extract the numerical value from a div containing: <div class="balance"...>$500.48</div> The goal is to retrieve 500.48 as a number, not a string. One approach is to use alert($(".balance").text()) to verify that the content is ret ...

How to Remove a Dynamically Generated Popover in Angular

As a newcomer to angular, I successfully implemented a bootstrap popover around selected text using the following function: $scope.highlight = function () { var a = document.createElement("a"); a.setAttribute('tabindex', "0"); ...

What is the best way to extract data from a text file that contains multiple data entries separated by pipes (|) using the fs module?

I'm currently utilizing the node.js fs module to read a text file. One thing that I'm wondering is, does the fs module only support reading text files or can it handle other file formats as well? Now, my primary inquiry is if the text file conta ...

Is it possible to send a variable to the controller through UI-Router and ui-sref?

Is it possible to pass multiple variables through the UI-Router for use in a state's controller? In the HTML, I have <li class="blist-item grid-loader" ng-repeat="item in items"> <a ui-sref="item({ id: {{item.$id}} })"><h3>{{it ...

Updating with MySQL can only manipulate integers and not strings

Setting up seems simple, but the number of potential causes is overwhelming for someone new to programming like me: In JavaScript, I define and later call: function dbUpdate(x, y, z) { $.ajax({ url: 'php/dbUpdate.php', type: ...

Update various components within a container

I have incorporated a function that automatically loads and refreshes content within a div every 10 seconds. Here is the script: $(function () { var timer, updateContent; function resetTimer() { if (timer) { window.clearTimeout(timer); ...

simulate angular service/promise in a karma/jasmine test

As I work on writing a karma/jasmine test, I'm seeking clarification on how mocks function in a service that returns a promise. Here's my scenario: Within a controller, I make the following call: mapService.getMapByUuid(mapUUID, isEditor).then( ...

Error in ReactJS: Trying to access property 'items' of an undefined object

I've been diving into ReactJS, but I've hit a roadblock with this perplexing error. My goal is to update the parent's items array state from its child component. To achieve this, I attempted to pass the addItem function as a prop to the chi ...

Where is the appropriate location to incorporate Vue.config.devtools = true?

I am interested in utilizing the Vue.js devtools, but I am uncertain about how to enable them. It seems like I need to include Vue.config.devtools = true after Vue has been loaded. However, it appears that Vue is loaded within a minified index.html file l ...

Issue with saving cookie from Express.js backend to Nuxt.js frontend

After successfully creating an authorization server using Express.js, I encountered a problem when trying to save the access and rotating refresh tokens as signed cookies. The issue arose from having separate backend and frontend servers with different dom ...

Having trouble getting the toggle button JavaScript code to function properly in React JS?

I'm in need of some assistance with the comment section located below the JavaScript Code. I am trying to implement a toggle button / hamburger button, but it seems that addEventListener is not necessary for ReactJS. Can someone provide guidance on wh ...

The Material UI theme of a React component is not locally scoped within the Shadow DOM

Introduction I have embarked on a project to develop a Chrome Extension that utilizes a React component through the Content script. The React component I am working with is a toolbar equipped with various sub-tools for users to interact with while browsin ...

Express.js does not display console.log messages while routing

Just starting to explore Express and its middleware functions. var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('id: ' + req.params.id + ' and name: ' + req.param ...

The previous successful execution of req.body is now yielding an undefined value

My req.body is suddenly undefined, even though it was working fine a few days ago. I've tried using the deprecated body-parser module, but no luck. Here's my code: JS: var express = require("express"); var router = express(); require(& ...

Guide on accessing a method from a div element in VueJS

Is there a way to only render a div based on a specific condition and call a method when the condition is true? Here's an example of what I'm trying to achieve: <div v-if="timetable === null" @click="mymethodhere"> ...

Design a circular progress bar with a cut-off at the bottom

Does anyone have suggestions on how to create a circular progress bar with cropping at the bottom, similar to this example: PROGRESS BAR? I've been searching for a component like this but haven't had any luck. Any ideas, especially utilizing Mate ...

Upon calling the createModalAddPost() function, a single window is triggered to open

Hey there, I'm having a JavaScript question. So, I have a panel that opens a window, and it works fine. But the issue arises when I close the window and try to open it again - it doesn't work. I have to reload the page every time in order to open ...

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

My attempt to send a GET request to the Mongo works fine, but I'm having trouble getting the PUT request to work. My suspicion is that there might be an issue with the path from the controller to the router. I've already tried using both update() ...

Leveraging the power of node pkg to generate standalone executables while configuring npm

I have successfully used pkg to create an executable file for my node js application. Everything is working fine in that aspect. However, I am also utilizing the config module to load yaml configuration files based on the environment. During the packaging ...

I possess a solitary div element that requires dynamic replication

I have a single container and an unspecified number of rows of data. I want to display this data on HTML cards that are generated dynamically based on the number of rows. For example, if there are 10 rows of data, I need to create 10 card elements with ea ...