uibModalInstance as an Optional Service

Question

I have a situation that needs to use uibModalInstance as an optional injector. Because I need to use the same controller for two views. One is the popup view and other is normal view. When am using the popup it's working fine. In another case, it's throwing an unknown injector Error.

Can any one help one this issue.

Regards, Kiran Gopal

I have the same issue and this http://stackoverflow.com/questions/37767680/inject-uibmodalinstance-to-a-controllar-not-initiated-by-a-uibmodal help me to resolve it. — Rafael Mangolin, Aug 01 '16 at 19:08

score 0 · Answer 1 · answered Feb 11 '16 at 06:47

0

You can inject module conditionally to a controller as follows. Make sure you have included the javascript for the concerned dependency for that view:

angular.module('myApp').controller('Controller', 
    ['$injector', '$scope', '$http',
    function($injector, $scope, $http) {
        var uibModalInstance;
        if (view1) {
            uibModalInstance = $injector.get('uibModalInstance');
        }
    });

answered Feb 11 '16 at 06:47

Aman Gupta

3,627
4
40
64

With this code: `$UMI = $injector.get('$uibModalInstance'); $UMI.close();` Get this error `Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance` – DFOXpro Jun 17 '16 at 22:59

score 0 · Answer 2 · answered Dec 21 '16 at 10:45

I have recently had to solve the same issue. Finally this has worked.

Originally, my code looked like this:

app.controller('PaymentController', ['$injector', 'PaymentService', 
                                     '$scope', '$rootScope', '$uibModalInstance', PaymentConstructor]);

function PaymentConstructor($injector, PaymentService, $scope, $rootScope, $modalInstance) {
    $scope.view = '';
    ...and so on...

..and requirement was to conditionally have/or not have the $uibModalInstance in the controller function.

Use this instead:

app.controller('PaymentController', dependencyInjection);

where dependencyInjection is array variable declared above:

var dependencyInjection = ['$injector', 'PaymentService', '$scope', '$rootScope']

..now you can decide - what to put to the array or what to not put. e.g.:

if (includeUibInstance) dependencyInjection.push('$uibModalInstance');
if (includeUibInstance) {
    dependencyInjection.push(PaymentConstructorWithUib);
} else {
    dependencyInjection.push(PaymentConstructorNoUib);
}

..finally, we need to declare those two new conditional functions:

function PaymentConstructorNoUib($injector, PaymentService, $scope, $rootScope) {
    PaymentConstructor($injector, PaymentService, $scope, $rootScope, null);
}

function PaymentConstructorWithUib($injector, PaymentService, $scope, $rootScope, $modalInstance) {
    PaymentConstructor($injector, PaymentService, $scope, $rootScope, $modalInstance);
}

//original controller function:
function PaymentConstructor($injector, PaymentService, $scope, $rootScope, $modalInstance) {
    // if $modalInstance is null then we are not in modal dialog
    $scope.view = '';
    ...

That's it. Tested. Works like a charm.

Could you show how you use this? Where is `includeUibInstance` set? — Josh Noe, Apr 03 '17 at 03:28
@JoshNoe Basically, it's what you can see here. Just a few lines above the `if (includeUibInstance) dependencyInjection.push('$uibModalInstance');` I set the `includeUibInstance` to `true` or `false` depending on different condition that comes from a different module. — Ivan Sivak, Apr 03 '17 at 05:19

uibModalInstance as an Optional Service

2 Answers2