Question

为什么$ uibModalInstance无法在这里注入？

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

baseController.$inject = ['$uibModal', '$uibModalInstance'];

function baseController($uibModal, $uibModalInstance) {

self.ok = function () {
$uibModalInstance.close(self.selected.item);
};

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

我正在尝试访问$ uibModalInstance，如果我尝试注入它，我会收到注入错误。

如果我不注射它，那么它是未定义的......

Answer 1

这里有很多很好的陈述，但没有一个能够解决这个问题。

amg-argh 让我的plkr以我设置注射的方式工作

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

最大的魔力来自于此编辑......

var childController = function ($scope, $uibModalInstance) {
        $scope.ok = function () {
            $uibModalInstance.close({ my: 'data' });
        }
        $scope.cancel = function () {                
            $uibModalInstance.dismiss();
        }
    }

    self.open = function (size) {

        var modalInstance = $uibModal.open({
            animation: self.animationsEnabled,
            templateUrl: 'help.html',
            controller: childController,
            size: size
        });
    };

+++++++++++++++++++++++++++++

我还要注意，这应该是稍后作为服务完成的，就像 icfantv 指出的那样。但我需要弄清楚返回和使用模态的承诺的语法......

谢谢大家的帮助!!

干杯！

Answer 2

我怀疑你的代码失败的原因是因为你试图将模态实例注入控制器，而控制器负责创建模态。它不能注入它，因为它还不存在。尝试使用单独的控制器：一个用于打开模态，另一个用于处理模态内容。您可以在our modal example的Javascript部分中看到此示例。

TBH，我以前从未见过以这种方式注入依赖关系。这样做有什么问题吗？您不仅仅使用的任何理由：

{{1}}

Answer 3

你的插件示例有一些问题：

加载脚本的顺序很重要，您有：

<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.module.js"></script>
<script src="childController.js"></script>
<script src="baseController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

这不起作用，因为app.module.js依赖于angular-ui-bootstrap.js而childController.js依赖于angular-animate.js而childController.js依赖于baseController.js你需要加载脚本以下顺序：

<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.module.js"></script>
<script src="baseController.js"></script>
<script src="childController.js"></script>

在childcontroller.js中，你有：

angular
      .module('app', ['ngAnimate'])

正在重新创建并覆盖“应用”。在app.module.js中创建。您应该在app.module.js中注入ngAnimate模块，如下所示：

angular
    .module('app', ['ngAnimate', 'ui.bootstrap']);

您不需要在基本控制器中引用$ uibModalInstance：

var modalInstance = $uibModal.open({
  animation: self.animationsEnabled,
  templateUrl: 'help.html',
  controller: 'BaseController',
  size: size
});

可让您访问通过＆var; var modalInstance＆＃39;打开的模式。有接近和解雇的方法。

$ uibModalInstance undefined（AngularJS UI.Bootstrap）

3 个答案: