CODEWITHSUNDEEP
javascriptangularjs
Thomas
Thomas

Reputation: 6670

Unknown Provider Error, Dependency Injection, Modal Controller

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:

enter image description here

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

Upvotes: 0

Views: 889

Answers (2)

Thomas
Thomas

Reputation: 6670

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) { ...

Upvotes: 1

Jim
Jim

Reputation: 113

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. :)

Upvotes: 0

Related Questions