$uibModal - dismiss failing to invoke

Question

I know there are numerous threads on this issue, but I have tried to follow solutions provided but am having no success.

The one I followed which resolved the error Unknown provider: $uibModalInstanceProvider, was the answer from @GeorgeKach in Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal. The error has been removed and the modal opens, but my dismissal/close methods aren't invoking.

    vm.open = function() {

        console.log('open') //invokes

        var modalInstance = $uibModal.open({
            templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
            appendTo: undefined,
            controller: function($uibModalInstance ,$scope){

                vm.ok = function () {
                    console.log('ok') //fails
                    $uibModalInstance.close();
                };

                vm.cancel = function () {
                    console.log('close') //fails
                    $uibModalInstance.dismiss('cancel');
                };

            }
        })

        modalInstance.result.then(function() {
          //resolved
        }, function() {
          //rejected
        })
    }

Question

Why are my ok and cancel methods not invoking? Rather than providing a work around, can someone explain why they aren't invoking?

Template

<div class="modal-header d-flex flex-column align-items-center justify-content-center">
    <i class="fa fa-warning fa-3x"></i>
    <p class="h4 txt-phase-red">Remove Patent</p>
</div>
<div class="modal-body d-flex flex-column align-items-center justify-content-center">
    <p class="font-body">Are you sure you want to remove patent application xxxxxxxxxx?</p>
</div>
<div class="modal-footer">
    <button class="btn btn--lg font-body font-body--component bg-phase-red txt-white" ng-click="$ctrl.cancel()">No</button>
    <button class="btn btn--lg font-body font-body--component bg-phase-green txt-white" ng-click="$ctrl.ok()">Yes</button>
</div>

Apologies. Edited my question. It is being called within the template — Patrick McDermott, Nov 14 '17 at 11:36

score 2 · Accepted Answer · answered Nov 14 '17 at 11:59

You should you controllerAs, and set it to vm

controllerAs (Type: string, Example: ctrl) - An alternative to the controller-as syntax. Requires the controller option to be provided as well.

var modalInstance = $uibModal.open({
        templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
        appendTo: undefined,
        controllerAs: 'vm',
        controller: function($uibModalInstance){

            var vm = this;

            vm.ok = function () {
                console.log('ok') //fails
                $uibModalInstance.close();
            };

            vm.cancel = function () {
                console.log('close') //fails
                $uibModalInstance.dismiss('cancel');
            };

        }
    })

Of course you can avoid using these kind of simple controllers by utilizing $close(result) and $dismiss(result) inside the template

<button class="btn btn-lg font-body font-body--component bg-phase-red txt-white" ng-click="$dismiss('cancel')">No</button>
<button class="btn btn-lg font-body font-body--component bg-phase-green txt-white" ng-click="$close('ok')">Yes</button>

Yes, u r right. @PatrickMcDermott im going to change my answer. Please accept this one. also +1 — Maxim Shoustin, Nov 14 '17 at 12:38

Maxim Shoustin · Answer 2 · 2017-11-14T12:42:10.357

For your concept use $scope instead vm or add attribute controllerAs

Change vm to $scope:

$scope.ok = function () {
    console.log('ok') //fails
     $uibModalInstance.close();
            };

$scope.cancel = function () {
  console.log('close') //fails
  $uibModalInstance.dismiss('cancel');
};

or:

var modalInstance = $uibModal.open({
        templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
        appendTo: undefined,
        controllerAs: 'vm',  <--- add 
        controller: function($uibModalInstance ,$scope){

            vm.ok = function () {
                console.log('ok') //fails
                $uibModalInstance.close();
            };

            vm.cancel = function () {
                console.log('close') //fails
                $uibModalInstance.dismiss('cancel');
            };

        }
    })

I would save myself time if I actually read the documentation. Thank you for your time @Maxim — Patrick McDermott, Nov 14 '17 at 11:47

$uibModal - dismiss failing to invoke

2 Answers2