Angular-UI Bootstrap Modal trigger on page load

Question

Whilst I have looked at the answers here, I'm still unable to trigger my openModal() function on page load.

Within my controller, I have the code (below question), which does allow openModal() to trigger fine either from an ng-click directive or when entering the following in the Chrome console:

angular.element($0).scope().openModal()

My problem is when I'm trying to conditionally open the modal upon page load. My current code is:

$scope.openModal = function (size) {

    modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'pageBuilder',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.chosenDeploymentSchedule;
            }
        }
    });
};

angular.element(document).ready(function () {

//  $scope.openModal();
    console.log('Hello World');
});

I do get my Hello World printing, but when I try uncommenting the $scope.openModal();, I get an infinite loop of undefined + Hello World printing out.

score 2 · Answer 1 · edited Jul 23 '16 at 16:01

I don't know if this solution is too late for this question but may be useful for someone.

Create your normal bootstrap modal

$scope.myDialog = function () {
    $uibModal.open({
       templateUrl: 'templatefolder/modal.html',
       backdrop: 'static',
       windowClass: 'modal',
       size: 'lg',
       controller: function ($scope, $uibModalInstance) {
            $scope.cancel = function () {
               $uibModalInstance.dismiss();
            };
          }
    });
};

Call the modal in your html page like so <span ng-init="myDialog()"></span>

That's it. This works for me and I hope it will work for someone too.

score 0 · Answer 2 · answered Dec 19 '14 at 01:53

0

You can call $scope.openModal() directly underneath where you define it in the controller. It'll open the modal right away.

answered Dec 19 '14 at 01:53

nairys

333
3
9

1

I tested it and it worked fine for me. Can you produce a plunkr to troubleshoot? – nairys Dec 19 '14 at 02:17

score 0 · Answer 3 · answered Dec 19 '14 at 02:17

Whilst still unable to call it directly from within the same controller, my solution was to add another method which gets called from an ng-init in the view:

$scope.launchModalConditionally = function(){
    if(!$scope.gotCredentials){
        $scope.openModal();
    }
};

Angular-UI Bootstrap Modal trigger on page load

3 Answers3