Angular UI Bootstrap: Promise resolved or rejected upon modal closure

I'm currently working with angular and bootstrap, utilizing the angular-ui-bootstrap bridge library. My goal is to reuse the modal component and encapsulate it within a promise that will be fulfilled upon successful closure of the modal (by clicking the OK button) or rejected (if the cancel button is clicked or if the user clicks outside the modal).

From what I've observed, there is the $modal service from the bridge library, providing only one accessible method: open(options). Additionally, there is the native angular promise implementation: $q. My aim is to find a way to integrate these two components.

I envision creating a custom component (possibly a service or factory) that offers a startFlow method which returns a promise. Invoking startFlow would also trigger the opening of the bootstrap modal. Upon closure of the modal (either positively or negatively), the promise would either be resolved or rejected.

Does anyone have any suggestions on how to approach this implementation? I have yet to come across an existing solution...

javascriptangularjstwitter-bootstrappromiseangular-promise

Answer №1

The result attribute within the response object of the open function is a promise that operates in the exact manner you have described. An illustration can be found in the documentation located at https://angular-ui.github.io/bootstrap/#/modal:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

This functionality can also be observed in action on this Plunker demonstration: http://plnkr.co/edit/ro5Dnkg0p9wYWlMCRqlN?p=preview

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

Vue.js: Synchronization of props may not happen instantly

Struggling with using vue.js to synchronize a prop between parent and child components. The challenge is that sync relies on events, so every time I update the value, I have to wait for $nextTick before seeing the update. It's cumbersome to include $n ...

javascriptvue.jssynchronizationparent-childprop

Encountering NPM install gyp errors in VSCode indicating that gyp is searching for Visual Studio

Running npm install on a local project has been quite challenging for me, as I keep encountering errors every time I try. Fortunately, some valuable information I found related to gyp and Python helped me make some progress. However, I'm currently fac ...

javascriptnode.jsvue.jsvisual-studio-codenpm

Instructions on creating an input field and a slider simultaneously

Currently, I am exploring the world of CSS 3D transforms and I am particularly interested in creating sliders to manage these transforms. I recently stumbled upon the Three.js editor and was impressed by how it handles the positioning, rotation, and scalin ...

javascriptjqueryhtmlinputthree.js

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

javascriptreactjstypescriptusecallback

Tips for altering promises within nested for loops?

Presented below is a complex function that aims to extract model variants from a csv file, which are stored as strings in an array. The path of this csv file depends on information obtained from other csv files, hence the need for looping. The csvService. ...

javascriptangularjspromiseangular-promise

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript

Encountered an unexpected GLTF import error in three.js due to invalid JSON syntax containing tokens like '<' and "<!DOCTYPE "

Whilst attempting to import my very first .gltf model into three.js using the Parcel bundler, I encountered a black screen and the following error message: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON a ...

javascriptthree.jsgltf

What is the best way to combine two responses and then convert them into a promise?

When making two calls, the firstCallData prints data fine. However, when I use + to merge the responses, it returns me the following Response. What is a better approach to achieve this task? main.ts let data = await this.processResponse(__data.Detail ...

javascriptarraystypescriptasync-await

Switch up image transitions using Javascript

I have already completed the css and html structure for my project. However, I am encountering issues with the JavaScript functionality. I really like the image effect on this website: (the blue one). I have attempted to replicate it here: , but have bee ...

javascriptjqueryhtmlcsstransition

Is there a way to retrieve multiple results by utilizing fetch and randomuser.me?

I am currently working with the randomuser.me API and have set up the fetch request correctly. My goal is to retrieve 5 users separated by commas instead of just one. As mentioned in randomuser.me's documentation, I simply need to append the fetch UR ...

javascriptfetch-api

Does Ext js have a monochromatic theme of blue running through everything

While the blue color may give off a nice office ambiance, it's important to have variety in the appearance of different applications. Is it simple to customize the look in ext js? ...

javascriptcssextjs

Using JQuery to target the input value based on its ID

When trying to extract the value of the input with id "registration_type," I entered the following command in the console: $('#registration_type') The output displayed was: <input id=​"registration_type" name=​"contact_registration[ty ...

javascriptjquery

Basic setup of an embedded database in MongoDB

I am currently facing a dilemma as I try to establish the database structure for my Mongodb application using Mongoose/Node.js. I have two main entities, namely Users and Books, and due to the lack of joins in MongoDB, I need to decide on an embedded syste ...

javascriptnode.jsmongodbmongoose

Ensure password confirmation is correct

Currently, I'm utilizing Yup for form validation. You can check it out here: https://www.npmjs.com/package/yup. Additionally, I came across this package called yup-password which seemed helpful for validating my Formik forms. Here's the link to i ...

javascriptnode.jsnpmformikyup

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref I've implemented FileReader() to read the field. Vue Component <div v-for="(image, index) in imgFile" :key="index"> <img :ref="'image'+parseInt( index )"> {{image.name}} ...

javascriptvue.js

No information retrieved from Ajax request

I've been utilizing the following jQuery code to execute an ajax call: $.ajax({ url: "/projects/project/xGetProjectStatus", type: "GET", dataType: "json"}) .done( function(request){ alert(request.responseText); ...

javascriptjqueryajaxget

Implementing CSS styles on selected elements using jQuery

My current HTML layout looks like this.. <div class="container> <div class="panel"> <div> <div> <div> <img class="match" src="myimage.jpg"> &l ...

javascriptjqueryhtmlcss

The jqGrid displaying data with datatype set to "jsonstring" is only showing the first page

When my JqGrid receives data from the server in JSON format, I use the following parameters: _self.GridParams = { rows: 7, page: 1, sidx: '', sord: '' } Once the data is retrieved, it is stored in the variable 'data': Objec ...

javascriptjqueryjsonjqgrid

chosen angularjs utilizing ng-repeat

Here is my HTML code: <select ng-model="selectedToggle" ng-change="changedValue()"> <option ng-repeat="x in toggle" value="{{x.data}}" ng-selected="">{{x.name}}</option> </select> This is my AngularJS code: var app = angu ...

angularjs

Creating a dynamic table inside a flex-grow container without disrupting the layout: A step-by-step guide

Currently, I am in the process of designing a responsive layout using Bootstrap 5.3 which consists of a NavBar, SideBar, ContentPanel, and StatusBar. The goal is to ensure that the application always occupies 100% of the view-height and view-width, display ...

htmlcsstwitter-bootstrapflexboxbootstrap-5