angular modal not closing ($uibModal )

Question

angular
.module('angProj')
.controller('UserCtrl',
    ['$scope', '$uibModal',
        function ($scope, $uibModal) {

            $scope.results = function (content, completed) {
                var modalInstance = $uibModal.open({
                        backdrop: 'static',
                        keyboard: false,
                        animation: $scope.animationsEnabled,
                        templateUrl: '/Scripts/angularApp/views/user-modal.html',
                        controller: 'UserModalCtrl',
                        resolve: {
                            items: function () {
                                return $scope.items;
                            }
                        }
                    });

                if (!completed || content.length === 0) {
                    return;
                }

        modalInstance.close();
        modalInstance.dismiss('cancel');

I am not able to close the model on user add completion.. On user-modal i am showing progress bar.. the code runs fine without error but the modal remains open. I also tried $uibModalInstance but the controller throws error: unknown provider (not able to inject $uibModalInstance on the same UserCtrl) I am injecting ui.bootstrap (ui-bootstrap-tpls-1.1.2.js)

Thanks for your time.

You should close the modal from your modal controller `controller: 'UserModalCtrl'` and inject `$uibModalInstance` there — sch, Feb 03 '16 at 12:44
@klskl I am doing tht ...I have a cancel button and its closing the modal from there ...but on process completion I want the modal to close automatically..without any user interaction (like cancel button click) — Scorpio, Feb 03 '16 at 12:47
you should use $uibModalInstance in modal controller (UserModalCtrl in your case)... — Poyraz Yilmaz, Feb 03 '16 at 13:12

score 5 · Answer 1 · answered Feb 03 '16 at 12:49

5

Use modalInstance.close() inside your UserModalCtrl controller

app.controller('UserModalCtrl', ['$scope', '$modalInstance' function($scope ,modalInstance {
  $scope.close = function () {
   modalInstance.close();
  };
}]);

answered Feb 03 '16 at 12:49

Rock

336
5
18

thts working fine but I want it to close after this condition if (!completed || content.length === 0) – Scorpio Feb 03 '16 at 12:54

score 0 · Answer 2 · answered Feb 03 '16 at 12:57

I have done something similar, I think.

I have a $modal controller that looks like this

angular.module('myApp').controller('infoCtrl', function ($scope, $uibModalInstance, loading) {

  $scope.editable = loading;

  $scope.$watch('editable.status', function(newValue, oldValue) {
    if (newValue == 'success'){
        // close modal
        $uibModalInstance.close('ok');
    } else if (newValue == 'error') {
        // show error message
    } 
  });
});

The injected loading is a service that looks like this

myApp.factory('loading', function() {
  return {
    status: ''
  }
});

And when I change the status of my loading service to 'success' (from anywhere, not the modal controller) the modal is closed.

I don't know if this is exactly what you were asking for, but I hope it helps, also, just ask if something is unclear!

EDIT: So let's say you have a service with a value isCompleted: false, inject that service into your modal controller, and use the $watch function, then when that isCompleted is changed to true, you close the modal.

angular modal not closing ($uibModal )

2 Answers2