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>

我希望在范围变量进度值变为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)
        }
    })
})

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

自动关闭bootstrap模态

1 个答案: