角引导模态：未知提供商：$ modalInstanceProvider [英] Angular Bootstrap Modal: Unknown provider: $modalInstanceProvider

问题描述

我试图用角引导模态指令（ http://angular-ui.github.io/bootstrap/ < /一>）如下，在我的控制器以打开模态：

I am trying to use the Angular Bootstrap Modal directive (http://angular-ui.github.io/bootstrap/) as follows, in my controller to open the modal:

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
}

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

But when I do, I get the following error:

Unknown provider: $modalInstanceProvider <- $modalInstance

如果我拿出 $ modalInstance ，它的工作原理，但我显然没有参考呼叫控制器模式。

If I take out $modalInstance, it works but I obviously have no reference to the modal in the calling controller..

我不知道这是值得注意的，但我现在用的控制器语法：

I don't know if it is worth noting, but I am using the Controller As syntax:

<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这是在这里显示的问题：<一href=\"http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=$p$pview\">http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=$p$pview

推荐答案

的问题是，你是在两个地方指定控制器 - 当打开一个模式和一个模板内 - 这是没有必要的。从模板中删除NG-控制器和预期的事情将工作：
<一href=\"http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=$p$pview\">http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=$p$pview

The problem was that you were specifying a controller in 2 places - when opening a modal and inside a template - this is not needed. Remove ng-controller from a template and things will work as expected: http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

这篇关于角引导模态：未知提供商：$ modalInstanceProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！