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. Они были полезны в объяснении этого.