AngularJS ui-bootstrap 模态实例问题答案

【问题标题】：AngularJS ui-bootstrap modal instance issueAngularJS ui-bootstrap 模态实例问题
【发布时间】：2016-02-09 13:38:27
【问题描述】：

我有 AngularJS 应用程序（版本 1.4.7）和最新版本的 ui.bootstrap。当我尝试注入 $uibModalInstance 时出现问题，这会引发错误Unknown provider: $uibModalInstanceProvider

这是控制器代码：

/**
 * @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'
        }
    );
};

这里是模态控制器

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


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

    _this.$uibModalInstance = $uibModalInstance;
}

知道什么会导致这种行为吗？

【问题讨论】：

你在哪里注册ClientModalInstController作为控制器？
那个代码在$inject块上面，我只是没有在这里显示
这里似乎可以正常工作~plnkr.co/edit/Z3UNct38ZGCsvMHTZ4M6?p=preview。一定是你缺少的东西。您的模块的依赖项是什么？
我已经看到了 plnkr，但我无法弄清楚我错过了什么。我已将 ui.bootstrap 添加到 modul。有线的事情是，我能够打开模态，但是当我尝试注入模态实例时，它会中断
尝试将ng-strict-di 属性添加到带有ng-app 的元素。它可能有助于指出任何错误。

标签： angularjs angular-bootstrap

【解决方案1】：

可能导致该行为的原因如下：

$uibModal.open() 返回一个$modalInstance，它需要将$uibModalInstance 的依赖注入到ClientModalInstController 控制器中。我看不到ClientModalInstController 的代码，但需要将$uibModalInstance 注入其中，这与$uibModal 不同

您可以在 ui-bootstrap 文档中的模态示例的 javascript 选项卡中查看此示例：http://angular-ui.github.io/bootstrap/

向下滚动到文档的 Modal 部分，然后查看 Javascript 选项卡中的代码，了解 ModalInstanceCtrl 及其注入的依赖项。

【讨论】：

我注入了$uibModalInstance，这是它抛出错误的部分
$uibModalInstance 已经注入，只有该注入会引发错误。

【解决方案2】：

@SilvioMarijic 如果项目未按正确顺序注入，则会中断。确保一切都排好。

代码示例：

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

  //CODE HERE

}]);

假设您在构造函数（任一行）中交换了 $http 和 $uiModal，您将收到您描述的错误。

【讨论】：