Conceal the Angular Bootstrap modal instead of shutting it down

Question

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player.

http://angular-ui.github.io/bootstrap/#/modal

My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the same modal, I can resume watching the video from where I left off.

In order to achieve this, I must:

Create a separate instance for each modal
Instead of using close(), I should hide() the modal. By doing so, the DOM elements remain intact and the video player does not need to be re-created.

I'm looking for an elegant solution since the Bootstrap modal does not have a hide feature. Is it advisable to use jQuery to show/hide the .modal-backdrop and .modal classes?

javascript css angularjs twitter-bootstrap

Answer 1

Answer №1

Extracted from a discussion on maintaining Angular Bootstrap modals upon closure:

Consider abstracting the modal state into its own service. This way, the modal controller can initialize the view state using the service.

For example, create a service:

.factory('ModalStateService', function(){
    var state = {
        someValue: 'something'
    };

    return {
        getState: function() { return state; }
    };
});

In your controller:

.controller('ModalCtrl', function($scope, ModalStateService){
    $scope.viewState = ModalStateService.getState();
});

In your modal content view:

 <span>{{viewState.someValue}}</span>

If you update someValue within your modal, like through an input, the service state will be updated. This ensures that the state persists even when the modal is created and destroyed.

Answer 2

Extracted from a discussion on maintaining Angular Bootstrap modals upon closure:

Consider abstracting the modal state into its own service. This way, the modal controller can initialize the view state using the service.

For example, create a service:

.factory('ModalStateService', function(){
    var state = {
        someValue: 'something'
    };

    return {
        getState: function() { return state; }
    };
});

In your controller:

.controller('ModalCtrl', function($scope, ModalStateService){
    $scope.viewState = ModalStateService.getState();
});

In your modal content view:

 <span>{{viewState.someValue}}</span>

If you update someValue within your modal, like through an input, the service state will be updated. This ensures that the state persists even when the modal is created and destroyed.

Conceal the Angular Bootstrap modal instead of shutting it down

Answer №1

Similar questions

Issue with extended waiting times in polling

Creating audio streams using react-player

The MVC execution sequence: Controller initialization happening after Ajax call

What is causing my css elements to appear larger compared to other instances?

Is it necessary to use a specific button to submit on Return (Enter)?

Multiple minute delays are causing issues for the Cron server due to the use of setTimeout()

How can you prevent multiple instances of JavaScript objects from being disposed of after they have completed their task?

Creating an animated background slide presentation

Create a navigation bar using CSS that is designed from an unordered list without any specific

Three.js: Objects in the distance appear more subtle

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

Difficulty with timing in React.js when rendering content from an Express.js API

Ways to transfer a state from the child component to the app component

Is your window.location.hash malfunctioning?

What is the best way to set values for the outcomes of a jQuery/AJAX post?

What is the reason behind a flex-item collapsing when it has a display property set to flex, unless it is assigned an explicit width of 100%

Execute AJAX request for two individual buttons

Enhancing an existing Angular1 project to Angular4 while incorporating CSS, Bootstrap, and HTML enhancements

AngularJS HTTP service

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?