Modal Window Issue (Unknown Provider: ModalInstanceProvider)

Question

New to AngularJS and can\'t seem to find out what this error means. I\'ve found a few others with the same error but it seems their issues don\'t correlate to mine.

Answer 1

I've adapted J. Bruni's Plunker to work with Bootstrap3. You can find it here:

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

Please note that beginning with ui-bootstrap 0.7.0 bootstrap3 support is going to be native and any issues regarding modals (and other directives, ex. progress bar) should be fixed.

Answer 2

I got the same error. By removing ng-controller from the template while providing your controller through $modal you can fix this problem.

$modal.open({
            templateUrl: 'MyView.html',
            controller: 'MyViewController'

        }); 

Answer 3

1. If you are providing the controller name while opening and also in your template then you will get same error.

2. Remove the ng-controller from your template

Happy coding

Answer 4

It seems you are not injecting the $modal service as a dependency.

How to "inject a service"?

Consider the function you are trying to use the service... you should declare it like this:

['$modal', function($modal) {
    // $modal has been injected here, you can use it
}]

---

Edit:

I've studied you Plunk now... it is overcomplicating simple things, and reveals some miscomprehensions about AngularJS concepts (controller, scope, etc.)

Also, it was using Bootstrap's 3 CSS - which is not compatible with AngularJS Bootstrap currently. I've changed the CSS link to Bootstrap 2.

See how it can be much much more simple and effective: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview

I'd recommend studying this document carefully, from start to finish: http://docs.angularjs.org/guide/concepts

This video is also very very good, but it does not provide deeper insight into the concepts: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

---

Basically, the error message was telling that you were trying to inject a service into something (the "ModalController", in your case) - but this service was not found.

"How I was trying to inject?" - you may ask. The answer is: every parameter you require in a Controller function is a "dependency" to be "injected" - and AngularJS "injector" service performs this task. This is how "$scope" parameter magically receives a "scope" - it is the injector working behind the scenes.

In you ModalController, the injector was trying to satisfy both the "$modalInstance" and the "items" dependencies (remove the "$modalInstance" parameter - the error message will change to "itemsProvider not found")...

If you want to receive dependencies like this, through the "magical" work of the injector, you need to create/declare services with these names... (or properly use the "resolve" attribute as you were trying to do) ...

...but this is not needed in this case at all. You just want access to "items", and return a selected item. You were also trying to close/dismiss the modal programatically.

You could resolve dependencies through the "resolve" attribute, but why complicate so much what can be achieved with simplicity? Just use the "scope" attribute instead, and provide the scope to the modal - it will have access to its properties. The modal also automatically adds "$close" and "$dismiss" functions to the scope, so you can easily use these functions.

You were trying to pass attributes from the main scope to the modal scope by injecting them as services into the modal controller! :-) You were trying to inject the own modal instance into its controller!!!

So, your main issue is related to the $injector - it worths studying what is this inject thing all about - it is well explained in the documented I linked above.

"Inject a service" is not as simple as "passing a variable to a function". You were almost there through the "resolve" attribute, but as I've said - really not needed for this simple case.

I've created another Plunker without using "scope", and keeping the "resolve"... it is not possible to inject the "modalInstance" as we do with "items":

'$modalInstance': function() { return modalInstance; }

...because it is still undefined at this moment... we could workaround by just calling $scope.$close in the ModalController (and not injecting the modal)...

...or, like I did, injecting it through a function... very crazy, but it works:

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

...I would never do like this... it is just for learning purposes!

---

At last but not least: by adding ng-controller in the template file, you are requiring the ModalController twice... you already stated it in the modal configuration. But through the modal configuration, you can have the dependency injection through the resolver - while through the template you don't have the "resolve" thing applied.

Update:

As pointed in the comments by Mahery, $modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.

Here is the updated Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

Indeed, the error was happening mainly due to the "ng-controller" atttribute in the template. The controller created through this way does not receive the "AngularUI treatment". Only the controller specified in the modal options receives the "treatment" where $modalInstance is provided...