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

Question

我正在尝试使用 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

Answer 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 的原作者。他们有助于解释这一点。