javascript - $uibModal - 取消调用失败

Question

我知道有很多关于这个问题的话题，但我尝试按照提供的解决方案进行操作，但没有成功。

我遵循的那个解决了错误Unknown provider: $uibModalInstanceProvider，是@GeorgeKach 在Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal 中的回答。 .错误已被删除，模式打开，但我的 dismissal/close 方法没有调用。

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

问题

为什么我的 ok 和 cancel 方法没有被调用？除了提供解决方法，有人可以解释为什么他们不调用吗？

模板

<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>

Answer 1

你应该controllerAs，并将其设置为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');
            };

        }
    })

当然，您可以通过在模板中使用 $close(result) 和 $dismiss(result) 来避免使用这些简单的 Controller

<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>