Angular ui-bootstrap - 无法获得模态关闭

I need help closing a modal. The modal is using ui-bootstrap plugin. I see in the documentation (http://angular-ui.github.io/bootstrap/) that they used two controllers for the modal. I would like to be able to close the modal with one controller.

我需要帮助关闭一个模态。模态是使用ui-bootstrap插件。我在文档(http://angular-ui.github.io/bootstrap/)中看到他们为模态使用了两个控制器。我希望能够用一个控制器关闭模态。

Here is my modal template:

这是我的模态模板:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
  <drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>

And here is the controller that the modal is used on:

这是模态用于的控制器:

var ChartController = function($rootScope, $scope, $modal) {

    $scope.openModal = function (plotData) {
        var unixtime_to_date = new Date(plotData);   //convert from milliseconds to seconds

        var modalInstance = $modal.open({
            size: 'lg',
            controller: function($scope) {            
                $scope.modalTitle = "Drilldown Chart";
                $scope.modalBody = plotData;
                $scope.drilldownData = {
                    daycount: $rootScope.diffDays,
                    dashboardreportid: 1,
                    companyid: $rootScope.companyid,
                    companybrandid: $rootScope.brandid,
                    startdate: unixtime_to_date,
                    enddate: unixtime_to_date,
                    clientdb: $rootScope.clientdb,
                    calltype: "Secondary"                            
                }
            },
            templateUrl: 'modals/chartModal.html'
        });

    };

};

I'm very confused on how to close the modal when clicking the close button or 'x' button. Thanks for the help!

单击关闭按钮或“x”按钮时,我对如何关闭模态感到困惑。谢谢您的帮助!

3 个解决方案

#1

In modalInstance controller add function cancel

在modalInstance控制器中添加功能取消

var ChartController = function($rootScope, $scope, $modal) {

    $scope.openModal = function (plotData) {
        var unixtime_to_date = new Date(plotData);   //convert from milliseconds to seconds

        var modalInstance = $modal.open({
            size: 'lg',
            controller: function($scope) {
               //function to close modal
               $scope.cancel = function() {
                        modalInstance.dismiss('cancel');
                };            
                $scope.modalTitle = "Drilldown Chart";
                $scope.modalBody = plotData;
                $scope.drilldownData = {
                    daycount: $rootScope.diffDays,
                    dashboardreportid: 1,
                    companyid: $rootScope.companyid,
                    companybrandid: $rootScope.brandid,
                    startdate: unixtime_to_date,
                    enddate: unixtime_to_date,
                    clientdb: $rootScope.clientdb,
                    calltype: "Secondary"                            
                }
            },
            templateUrl: 'modals/chartModal.html'
        });

    };

};

HTML Add ng-click="cancel()" to button type="button"...

HTML添加ng-click =“cancel()”到按钮类型=“按钮”...

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" 
ng-click="cancel()" aria-hidden="true">&times;</button>
  <h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
  <drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>

#2

add this on your controller

在控制器上添加它

var ChartController = function($rootScope, $scope, $modal,$modalInstance) {
    $scope.openModal = function (plotData) {
        var unixtime_to_date = new Date(plotData);   //convert from milliseconds to seconds

        var modalInstance = $modal.open({
            size: 'lg',
            controller: function($scope) {            
                $scope.modalTitle = "Drilldown Chart";
                $scope.modalBody = plotData;
                $scope.drilldownData = {
                    daycount: $rootScope.diffDays,
                    dashboardreportid: 1,
                    companyid: $rootScope.companyid,
                    companybrandid: $rootScope.brandid,
                    startdate: unixtime_to_date,
                    enddate: unixtime_to_date,
                    clientdb: $rootScope.clientdb,
                    calltype: "Secondary"                            
                }
            },
            templateUrl: 'modals/chartModal.html'
        });

    };
$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

};

and view will be like this

和视图将是这样的

<button type="button" class="btn btn-default pull-right" ng-click="cancel()" data-ismiss="modal">Close</button>

I hope it should work

我希望它应该有效

#3

ng-click="$dismiss()" is all you need and close button markup can be as below

你只需要ng-click =“$ dismiss()”,关闭按钮标记可以如下所示

<button ng-click="$dismiss()" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

#1