bootstrap 模态的自动关闭

Question

我有一个 bootstrap 模式，我想在加载所有值后关闭它。以下是打开模态的代码 -

    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>

我想在 scope 变量 progress 的值变为 100 时关闭模态，我该怎么办？

Answer 1

控制器代码

...
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)
        }
    })
})

您的具体情况：

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

在这里工作 fiddle，http://jsfiddle.net/n0fbo3t3/

bootstrap 模态的自动关闭

automatic close of bootstrap modal

angularjs

angular-ui-bootstrap