$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

对于您的概念，请使用 $scope 代替 vm 或添加属性 controllerAs

将vm更改为$scope:

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

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

或：

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

        }
    })

Answer 2

你应该 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) 来避免使用这些简单的控制器

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

$uibModal - 取消调用失败

$uibModal - dismiss failing to invoke

javascript

angularjs

angular-ui-bootstrap