Question

我正在尝试使用Angular Bootstrap Modal指令（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

问题是你在两个地方指定了一个控制器 - 当打开模态时和模板内部 - 这是不需要的。从模板中删除ng-controller，事情将按预期工作： http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

Answer 2

首先尝试这种语法

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

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

这是lib中的棘手部分。随意询问ui-bootstrap的原作者。他们帮助解释了这一点。

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

修改

2 个答案: