0

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?

Improve this question
1
  • I edited my post with a fiddle that should guide you forward. Commented Jun 29, 2015 at 7:32

1 Answer 1

Reset to default
3

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Scope variable progress is getting modified in the first controller and I want to put a watch on the updated values of progress. Above code is making a copy of the progress variable and changing it in the second controller.
Yeh, I just wanted to simulate the situation in the plunker. In your situation, you'll want to $watch $scope.$parent.progress instead. I edited my post accordingly.