CODEWITHSUNDEEP
angularjs
user3845941
user3845941

Reputation: 205

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

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!

Upvotes: 1

Views: 1611

Answers (3)

OHM
OHM

Reputation: 318

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>

Upvotes: 0

sylwester
sylwester

Reputation: 16498

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>

Upvotes: 1

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

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

Upvotes: 1

Related Questions