代码之家 › 专栏 › 技术社区 › Patrick McDermott

$uibModal-拒绝调用失败

angular-ui-bootstrap angularjs javascript

Patrick McDermott · 技术社区 · 8 年前

我知道在这个问题上有很多线索,但我已经尝试遵循提供的解决方案,但没有成功。

我遵循的解决错误的方法 Unknown provider: $uibModalInstanceProvider ,这是乔治·卡奇的回答 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>

2 回复 | 直到 8 年前

svarog Rostyslav 8 年前

你应该你 controllerAs ,并将其设置为 vm

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>

Maxim Shoustin 8 年前

供您的概念使用 $scope 相反 vm controllerAs

改变 虚拟机 到 $范围 :

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

        }
    })