CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user2851669
user2851669

Reputation:

automatic close of bootstrap modal

I have a bootstrap modal which I want to close when all values have been loaded. Following is the code opening the modal -

    function open(){
    console.log("open modal");
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: 'views/view1.html',
        scope: $scope,
    });
};

view1.html

    <div class="modal-header">
    </div>
    <div class="modal-body">
    <div>
        <progressbar class="progress-striped active" max="100" type='success' value="progress"></progressbar>
    </div>
    </div>

I want to close the modal when value of scope variable progress becomes 100, how can I go about it?

Upvotes: 0

Views: 3194

Answers (1)

Fissio
Fissio

Reputation: 3758

Controller code

...
function open(){
    console.log("open modal");
    var modalInstance = $modal.open({
        animation: true,
        controller: 'modalController'
        templateUrl: 'views/view1.html',
        scope: $scope,
    });
}) // End of the actual page controller
.controller('modalController', function($scope, $modalInstance, $interval, $timeout) {
    $scope.progress = $scope.$parent.progress;
    $interval(function() { if ($scope.progress < 100) $scope.progress += 1 }, 50);
    $scope.$watch(function() {return $scope.progress}, function() {
        if ($scope.progress >= 100) {
            $timeout(function() {
                $modalInstance.close();
            }, 1000)
        }
    })
})

For the exact situation of yours:

.controller('modalController', function($scope, $modalInstance, $timeout) {
    $scope.$watch(function() {return $scope.$parent.progress}, function() {
        if ($scope.$parent.progress >= 100) {
            $timeout(function() {
                $modalInstance.close();
            }, 1000)
        }
    })
})

Working fiddle here, http://jsfiddle.net/n0fbo3t3/

Upvotes: 3

Related Questions