Angular Bootstrap Modal: Неизвестный поставщик: $modalInstanceProvider

Я пытаюсь использовать директиву 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)
]);

Я создал плункер, который показывает проблему здесь: http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

Ответ 1

Проблема заключалась в том, что вы указали контроллер в двух местах - при открытии модального и внутри шаблона - это не нужно. Удалите ng-контроллер из шаблона, и все будет работать так, как ожидалось: http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

Ответ 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'
    });

это действительно тот же самый объект. Он вводится обратно в контроллер, но это не сервис / factory. Таким образом, у него нет провайдера.

Это сложная часть в lib. Не стесняйтесь обращаться к оригинальным авторам ui-bootstrap. Они были полезны в объяснении этого.