Question

我知道在这个问题上有很多线索，但我试图按照提供的解决方案但是没有成功。

@GeorgeKach在Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal中回答了我解决错误Unknown provider: $uibModalInstanceProvider的问题。错误已被删除并且模式打开，但我的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） - 控制器作为语法的替代方法。还需要提供控制器选项。

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>

Answer 2

对于您的概念，请使用$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');
            };

        }
    })

$ uibModal - 解雇无法调用

2 个答案: