Angular ui-bootstrap - Can't get modal to close

Question

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.

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!

sylwester · Accepted Answer · 2014-07-18 21:07:07Z

In modalInstance controller add function cancel

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

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

Narek Mamikonyan · Accepted Answer · 2014-07-18 21:02:39Z

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

PMerlet · Accepted Answer · 2017-11-22 11:21:42Z

0

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

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

edited Nov 22, 2017 at 11:21

PMerlet

2,5944 gold badges25 silver badges42 bronze badges

answered Nov 22, 2017 at 10:21

OHM

3182 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular ui-bootstrap - Can't get modal to close

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related