AngularJS ui-bootstrap modal instance issue

问题

I have AngularJS app (version 1.4.7) and latest version of ui.bootstrap. Problem occurs when I try to inject $uibModalInstance which throws error Unknown provider: $uibModalInstanceProvider

Here is controller code:

/**
 * @constructor
 * @param $uibModal
 */
function ClientsController($uibModal)
{
    var _this = this;

    _this.$uibModal = $uibModal;
}


/**
 *
 */
ClientsController.prototype.create = function()
{
    var instance = this.$uibModal.open(
        {
            animation: true,
            templateUrl: 'modules/clients/views/modal/client.html',
            controller: 'ClientModalInstController as ctrl',
            size: 'lg'
        }
    );
};

Here is modal controller

ClientModalInstController.$inject = [
    '$uibModalInstance'
];


/**
 * @constructor
 * @param $uibModalInstance
 */
function ClientModalInstController($uibModalInstance)
{
    var _this = this;

    _this.$uibModalInstance = $uibModalInstance;
}

Any idea what could cause this kind of behavior?

回答1:

What could be causing the behavior is the following:

$uibModal.open() returns a $modalInstance which requires a dependency injection of $uibModalInstance into the ClientModalInstController controller. I can't see the code for ClientModalInstController, but it needs to have $uibModalInstance injected into it, which is different than $uibModal

You can see an example of this in the javascript tab of the Modal example in the ui-bootstrap docs: http://angular-ui.github.io/bootstrap/

Scroll down to the Modal section of the docs and look at the code in the Javascript tab for the ModalInstanceCtrl and its injected dependencies.

回答2:

@SilvioMarijic this breaks if the items aren't injected correct order. Make sure everything lines up.

CODE EXAMPLE:

angular.module('App').controller('YourController', ['$scope', '$http', '$uibModal', 
function ($scope, $http, $uibModal) {

  //CODE HERE

}]);

Assume you swapped $http and $uiModal in the constructor (either line) you'll get the error your describing.

来源：https://stackoverflow.com/questions/33600137/angularjs-ui-bootstrap-modal-instance-issue

标签

angularjs

angular-bootstrap