Unknown Provider Error, Dependency Injection, Modal Controller

Question

I am attempting to build a custom modal service to accept data and produce a modal with those inputs; however, I am receiving the unknown provider error is Angular when passing the literal identifier of the controller to the controller property of the modal.

I've got dependency injection working elsewhere in my application; it is only failing, here. There are a number of questions on SO dealing with this issue, I know; however, out of those that I have read, I am unable to find a more generic answer that might begin to point me in the right direction.

Here is my service code:

angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {

    this.openCustomModal = function (size, title, message, action) {
        var actionToPerformOnConfirm = action;

        var modalInstance = $uibModal.open({
            templateUrl: 'templates/CustomModal.html',
            controller: 'CustomModalInstanceController',
            controllerAs: 'vm',
            size: size,
            resolve: {
                content: function () {
                    return {
                        title: title,
                        message: message
                    };
                }
            }
        });

        modalInstance.result.then(function (actionToPerformOnConfirm) {
            console.log('something happened');
        }.bind(this));
    };
}]);

And here is the modal Controller, referenced, above:

angular.module('app').controller('CustomModalInstanceController', function ($uibModalInstance, content) {
    var vm = this;

    vm.title = content.title;
    vm.message = content.message;

    $scope.confirmAction = function () {
        $uibModalInstance.close();
    };

    $scope.cancelAction = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

This should be enough from what I understand of Angular. Everything works in this service, otherwise, if the controller reference is removed.

There's even this question (a great summation of all the questions I have encountered) which corroborates the documentation and the numerous examples I have seen online; yet, I am still getting the unknown provider error. This user even asks the same question (again, from what I can see, my code is a shining example of "correct")!

To show that both are in the same directory, here is a picture of the directory structure:

Where do I need to begin to look to resolve this issue? Is this an application configuration issue?

unknown provider errors are usually due to services or controller not being found, are your service and controller in different directories? — John, Feb 16 '16 at 14:43
@ManuAntony they are in the same directory, here. They do get spat out into a minified file. Will post image of directory structure if that is helpful? — Thomas, Feb 16 '16 at 14:45
that would be helpful also how is your app piecing together the controllers?, from the looks of it your controller is undefined within your app, try restarting your dev environment if you just added the controller — John, Feb 16 '16 at 14:47
@ManuAntony actually, that's a good question. I am newer to Angular scene. The original architect looks to have included a `routes.js` file with calls to an injected `$stateProvider`. Here, templates are mapped to controllers. The odd thing is I have not had to modify this file for the inclusion of my service (don't know if that is normal). If the controlled is not registered here, could that be the culprit? — Thomas, Feb 16 '16 at 14:51
It could be, usually most web apps specify the controllers used by the app somewhere like a config setting. Most cases the culprit is not loading the controllers for your app as described here http://stackoverflow.com/questions/15244272/angularjs-error-unknown-provider — John, Feb 16 '16 at 14:57
The original error is the most useful piece of every error-related question, you haven't posted it. — Estus Flask, Feb 16 '16 at 15:02
@Thomas Can you show how you're injecting a controller within that module? A controller is not injected the same way as other components. — dmcqu314, Feb 16 '16 at 15:12
@dmcqu314 what you see is what you get :) I haven't done anything else to support the injection. Sounds like I am missing something? — Thomas, Feb 16 '16 at 15:15
my question might sound silly, but can you check the params passed into the controller are in the right way? `$uibModalInstance, content` . Or better yet can you remove everything in the controller just a empty controller no params and see if you are still getting the error? — John, Feb 16 '16 at 15:59
@ManuAntony definitely something with params. Good call. Thought I tried that approach. I think it might be the inject syntax surrounding `$uibModalInstance`. I'll get back. — Thomas, Feb 16 '16 at 16:08

score 1 · Accepted Answer · answered Feb 16 '16 at 18:00

I am going to answer my own question, in great thanks to Manu Antony for working with me. The problem was not the injection of the controller, itself, but rather with the parameters supplied to the controller.

In the end, it was a syntactical error on my part.

Here is the correct controller signature syntax (I added scope for fun):

angular.module('app').controller('CustomModalInstanceController', ['$scope', '$uibModalInstance', 'content', function ($scope, $uibModalInstance, content) { ...

Jim · Answer 2 · 2016-02-16T16:02:13.790

0

When I do encounter these issues, they are very frustrating. The steps I take to resolve these issues are to go back to the script tag in the html and make sure the ID is the same as the templateUrl. So here i am showing you where i create my modal:

  var editPatient = $uibModal.open({    //Here is where the modal gets created. you set the html page and the controller
        templateUrl: 'EditPatientData.html',
        controller: 'EditPatientData',
        size: size,
        resolve: {
            data: function () {
                return angular.copy(patientModel);
            }
        }
    });

Now Below I am showing you the code in my Html file that maps to the code above. Make sure the ID in the script tag is exactly the same in your js. (I suggest you use copy and paste to avoid spelling errors.)

<script type="text/ng-template" id="EditPatientData.html">
    <div class="modal-header">
        <h3 class="modal-title">Edit Patient Data</h3>
    </div>
    <div class="modal-body">
     //whatever you want to display
    </div>
</script>

Hopefully this answers your question. If you need any more help, or more specification, do not hesitate to ask. :)

edited Feb 16 '16 at 16:02

answered Feb 16 '16 at 15:56

Jim

113
2
11

not sure if this would solve it as the OP suggested ** Everything works in this service, otherwise, if the controller reference is removed. ** , i'm guessing the controller is at fault – John Feb 16 '16 at 16:03
@ManuAntony When i encounter many of the Same issues he is talking about, those are the main points I look for and try to fix. He should try what I stated and see what happens. – Jim Feb 16 '16 at 16:17
@James can you post your controller? I am having trouble passing data from the modal service to the controller – Thomas Feb 16 '16 at 17:13
@Thomas just to clarify, which controller do you want? The main controller or the modal controller? – Jim Feb 16 '16 at 17:14
@James modal. If you could look at my example, too, that would be great. The problem I am having is getting the params. to resolve – Thomas Feb 16 '16 at 17:16

Unknown Provider Error, Dependency Injection, Modal Controller

2 Answers2