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

Complete guide to Angular currency handling

Issue in Firefox: Footer is wrapping around the main content

"Debugging a simple demonstration showcasing NodeJS, AngularJS, and Express

How can I implement jQuery autocomplete with customized settings?

The element.find() function is experiencing issues when utilizing a templateUrl within a directive

Arrange records in ascending order by phone number when multiple are returned on the same date

Having trouble retrieving mobiscroll instance in Angular with Ionic

Are there any instances of a race condition present in the following?

Controlling the window opener; Inserting text into an element in the parent window

Stop the change event from occurring on a textarea when the user clicks on an external cancel button

Tips for exchanging JSON data between HTML and PHP using jQuery Ajax?

What is the best way to insert a newline in a shell_exec command in PHP

An issue in D3.js where the chart bars are not properly synced with the x-axis labels

In TypeScript, the catch block does not get triggered

The modal box should adjust its height to perfectly accommodate the content within

Tips on separating/callback functions based on earlier variables

Issue with displaying options in Angular2 v2.4.9 HTML select element

Unable to prevent Protractor from showing file download prompt

Utilize Angular JS to dynamically load a personalized directive that aligns with the scope of the

Using maxDate in Material UI DatePicker Component to set a maximum date limit