Angular Bootstrap 模态：未知提供者：$modalInstanceProvider

Posted 2023-02-19

【中文标题】Angular Bootstrap 模态：未知提供者：$modalInstanceProvider

【英文标题】：Angular Bootstrap Modal: Unknown provider: $modalInstanceProvider

【发布时间】：2014-01-28 00:47:34

【问题描述】：

我正在尝试使用 Angular Bootstrap 模态指令 (http://angular-ui.github.io/bootstrap/)，如下所示，在我的控制器中打开模态：

function customerSearch() 
    var modalInstance = $modal.open(
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    );

    modalInstance.result.then(function(selectedCustomer) 
        console.log(selectedCustomer);
    );

在模态控制器中：

var controllerId = 'customers.modal';

angular.module('app').controller(controllerId,
    ['$modalInstance', customersModal]);

function customersModal($modalInstance) 
    // Modal controller stuff

但是当我这样做时，我收到以下错误：

Unknown provider: $modalInstanceProvider <- $modalInstance

如果我取出$modalInstance，它可以工作，但我显然没有引用调用控制器中的模态..

编辑

不知道是否值得注意，但我使用的是Controller As语法：

<div class="container-fluid" data-ng-controller="customers.modal as vm">

应用依赖：

var app = angular.module('app', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute',          // routing
    'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)

    // Custom modules 
    'common',           // common functions, logger, spinner
    'common.bootstrap', // bootstrap dialog wrapper functions

    // 3rd Party Modules
    'ui.bootstrap',      // ui-bootstrap (ex: carousel, pagination, dialog)
    'breeze.directives', // breeze validation directive (zValidate)
]);

我创建了一个 plunker，它在这里显示了问题：http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

【问题讨论】：

已创建自定义指令或使用angular-ui.github.io/bootstrap 指令

抱歉，我忘了说我正在使用在该网址找到的那个：angular-ui.github.io/bootstrap

好吧，你有一种很奇怪的方式来分三步声明控制器。如果 Angular 难以找到函数，可能会弄乱名称解析。

你能说明你在哪里声明你的模块的依赖吗？

我发现以这种方式管理和执行日志记录操作更容易

【参考方案1】：

先试试这个语法

angular.module('app').controller('customers.modal',
    ['$modalInstance', function($modalInstance)
// Modal controller stuff
]);

我认为如果你使用括号表示法并在外面声明控制器，它会搞砸。

$modalInstance 是您在那里创建的 modalInstance

var modalInstance = $modal.open(
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    );

这确实是同一个对象。它被注入控制器，但它不是服务/工厂。所以它没有提供者。

这是库中一个棘手的部分。随意询问 ui-bootstrap 的原作者。他们有助于解释这一点。

【讨论】：

好的，我没有注意到模板部分。 可能会加载控制器两次？

@BiffBaffBoff 你真的应该发送一个最小的plunker，否则我们都在黑暗中刺伤......

@pkozlowski.opensource 我在这里创建了一个 plunker：plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

【参考方案2】：

问题是您在 2 个地方指定了控制器 - 打开模式时和在模板内 - 这不是必需的。从模板中删除 ng-controller，一切都会按预期工作： http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

【讨论】：

如果我想将控制器用作语法并从 $modal.open() 中删除控制器怎么办？

你可以在打开一个modal时使用控制器作为语法，如plunker所示。但是 $modalInstance 只会被注入到传递给 open 方法的控制器中。

当时使用控制器时有没有办法传入$modalInstance？我似乎遇到了我的虚拟机没有更新的问题：plnkr.co/edit/T4E38CmFqy9vsCtYurS7?p=preview

@BiffBaffBoff 我不确定您要确切地做什么，但也许这个 plunker 会有所帮助？ plnkr.co/edit/OmWNr45yquoEMfq19HCg?p=preview - 顺便说一句 - 没有 ng-foreach - 你需要使用 ng-repeat。

我删除了 ng-controller，它对我有用。但现在我很困惑。这个来自角度指令引导程序的 plunker 代码可以工作，并且在 html 中有 ng-controller。见here