trigger modal popup from controller
19,698
Solution 1
Don't use jquery, use angular-ui.
https://angular-ui.github.io/bootstrap/#/modal
You can open the modal programmatically like below, and pass your data in in the resolve. This is copy and pasted straight from their example.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Solution 2
Find element by angular.element and hide.
var popup = angular.element("#modal-default");
//for hide model
popup.modal('hide');
//for show model
popup.modal('show');
Solution 3
Try something like this -
$('#yourModalId').modal('show');
Author by
MrProgram
Updated on June 17, 2022Comments
-
MrProgram almost 2 years
I have a bootstrap modal popup which I fill with data from my modalcontroller. After I filled it with data I would like to show it. To be able to show the modalpopup straight away when going into the page I would like to trigger it directly. Right now I have a button which does that, but how can I do it automatic in a proper way?
<!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class=""> <form class="form-horizontal" name="form" role="form"> <div ng-repeat="item in items"> <input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br /> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
My controller:
angular.module("Modal") .controller("ModalController", [ "$scope", "$rootScope", "$location", "ModalService", "AuthenticationService", function ($scope, $rootScope, $location, ModalService, AuthenticationService) { AuthenticationService.GetCurrentWindowsUser(function(username) { $scope.username = username; }); $scope.getAllItems = function () { AuthenticationService.GetCurrentWindowsUser(function (username) { if (username) { AuthenticationService.GetItems(username, function (items) { $scope.items = items; //Trigger modalpopup here }); } }); } } ]);