Closing a modal

Question

I'm having rough times trying to close a modal with angularjs.
What I'm doing is open a simple modal when an event is triggered, do something inside the modal and then confirm or abort the operation.
The first opiton goes fine but when I click on the "Abort" button to close the modal the compilator says that close() is not a function.
I thought it was an instance problem so I created one and assigned the open() and close() methods to it but nothing changed...
Here's the JS code:

angular.module("docAcquire.controllers")
.controller('HomeController', ['$scope', '$modal', function ($scope, $modal) {

    $scope.modalInstance = $modal;

    $scope.openDoc = function() {
        $scope.modalInstance = $modal.open({
            templateUrl: 'partials/modals/Doc.html',
            controller: '',
            size : 'lg',
            backdrop: 'static',
            keyboard: false,
            resolve: {}
        });         
     };

    $scope.abortOperation = function() {
        $scope.modalInstance.close();       
     };
}

What am I doing wrong?!

EDIT: if you're going to downvote the question at least be man enough to explain why...

@Tushar removing it would result in a call of an undefined object... — Leon
you didn't add $modalInstance in your controller that is why its showing error. — Durgpal Singh
you need to add controller for it and inject $modalInstance service to that controller. With that service you can able to close modal. $modal.open function return different thing you can use it to resolve promise from modal or take action after modal closed... — Poyraz Yilmaz

Durgpal Singh Durgpal Singh · Accepted Answer · 2016-06-09T07:25:17

Yor didn't add $modalInstance in your controller. You have two way to close modal

$scope.openDoc = function() {
    $scope.modalInstance = $modal.open({
        templateUrl: 'partials/modals/Doc.html',
        size : 'lg',
        backdrop: 'static',
        keyboard: false,
        resolve: {},
        controller: ['$scope', '$modalInstance', 
            function($scope, $modalInstance){

        //First Way
        $scope.abortOperation = function() {
            $modalInstance.close();       
         };
        //Second Way
        $scope.abortOperation = function() {
            $modalInstance.dismiss('cancel');      
         };
    }]});
}

Closing a modal

1 Answers