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.

aurel · Accepted Answer · 2016-07-23 16:01:13Z

2

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.

edited Jul 23, 2016 at 16:01

aurel

441 silver badge12 bronze badges

answered Feb 2, 2016 at 9:21

Kwesi Aryee

3082 silver badges15 bronze badges

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

1 Comment

Dhruv Over a year ago

ng-init did it!

nairys · Accepted Answer · 2014-12-19 01:53:34Z

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, 2014 at 1:53

nairys

3433 silver badges9 bronze badges

1 Comment

nairys Over a year ago

I tested it and it worked fine for me. Can you produce a plunkr to troubleshoot?

ljs.dev · Accepted Answer · 2014-12-19 02:17:35Z

0

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();
    }
};

answered Dec 19, 2014 at 2:17

ljs.dev

4,4933 gold badges51 silver badges80 bronze badges

Collectives™ on Stack Overflow

Angular-UI Bootstrap Modal trigger on page load

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related