bootstrap modal ui中的按钮控件不起作用

Question

如何让模态中的按钮控件工作？我能够打开模态，但按钮不起作用。我是角度ui bootstrap的新手。任何建议或帮助都会很棒！

这是我的组件：

export default function (app) {
    app.component('review', {
        templateUrl: 'Content/app/components/review/Review.html',
        controller: ['$uibModal', ReviewController]
    })

    function ReviewController($uibModal) {
        var $ctrl = this;

        $ctrl.ShowModal = function() {
            $uibModal.open({
                templateUrl: 'errorModal',
                backdrop: true,
                controller: ['$uibModalInstance', function($uibModalInstance) {
                    var $ctrl = this;

                    $ctrl.cancel = function () {
                        $uibModalInstance.dismiss('cancel');
                    };
                }]
            })
        }
    }
}

以下是模态的HTML：

<script type="text/ng-template" id="errorModal">
    <div class="modal-header">
        <h3 class="modal-title">Oops!</h3>
    </div>
    <div class="modal-body">
        test
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="$ctrl.cancel()">Okay</button>
    </div>
</script>

Answer 1

选项1

我们需要动态分配模态范围，因此添加属性：$ctrl.ShowModal = function() { $uibModal.open({ templateUrl: 'errorModal', backdrop: true, controllerAs: '$ctrl', controller: ['$uibModalInstance', function($uibModalInstance) { var $ctrl = this; $ctrl.cancel = function () { $uibModalInstance.dismiss('cancel'); }; }] }) }

a.e：

$scope

选项2

尝试使用模态//... controller: ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) { $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); }; }], // ... ：

 <button class="btn btn-default" ng-click="cancel()">Okay</button>

并在HTML中：

toJSON