Modal Window Issue (Неизвестный поставщик: ModalInstanceProvider)

Ответ 1

Кажется, вы не вводите службу $modal в качестве зависимости.

Как "ввести услугу"?

Рассмотрим function, который вы пытаетесь использовать в сервисе... вы должны объявить его следующим образом:

['$modal', function($modal) {
    // $modal has been injected here, you can use it
}]

Edit:

Я изучил вас Plunk сейчас... это слишком сложно, и обнаруживает некоторые недоразумения в концепциях AngularJS (контроллер, область видимости и т.д.).

Кроме того, он использовал Bootstrap 3 CSS, который в настоящее время не совместим с AnglerJS Bootstrap. Я изменил ссылку CSS на Bootstrap 2.

Посмотрите, как это может быть намного проще и эффективнее: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview

Я бы рекомендовал внимательно изучить этот документ, от начала до конца: http://docs.angularjs.org/guide/concepts

Это видео тоже очень хорошо, но оно не дает более глубокого понимания концепций: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

В основном, в сообщении об ошибке говорилось, что вы пытались внедрить службу во что-то ( "ModalController", в вашем случае), но эта служба не была найдена.

"Как я пытался впрыснуть?" - спросите вы. Ответ: каждый параметр, который вам нужен в функции Controller, является "зависимостью", которая должна быть "введена", и служба AnglerJS "инжектор" выполняет эту задачу. Таким образом, параметр "$ scope" магически получает "область" - это инжектор, работающий за кулисами.

В вашем ModalController инжектор пытался удовлетворить зависимости "$ modalInstance" и "items" (удалить параметр "$ modalInstance" - сообщение об ошибке изменится на "itemsProvider not found" )...

Если вы хотите получать зависимости, подобные этому, посредством "магической" работы инжектора, вам нужно создать/объявить службы с этими именами... (или правильно использовать атрибут "разрешить" , как вы пытались сделать)...

... но в этом случае это вообще не требуется. Вы просто хотите получить доступ к "элементам" и вернуть выбранный элемент. Вы также пытались закрыть/отклонить модальный программный подход.

Вы можете разрешать зависимости через атрибут "разрешить" , но почему так сложно усложнить то, что можно достичь с помощью простоты? Просто используйте вместо этого атрибут "scope" и предоставите область модальности - он будет иметь доступ к своим свойствам. Модаль также автоматически добавляет функции "закрыть" и "отклонить" в область видимости, поэтому вы можете легко использовать эти функции.

Вы пытались передать атрибуты из основной области в область модальности, введя их в качестве сервисов в модальный контроллер!:-) Вы пытались ввести собственный модальный экземпляр в свой контроллер!!!

Итак, ваша основная проблема связана с $injector - стоит подумать о том, что это за вставить - это хорошо объяснено в документированном я, который был связан выше.

"Ввести службу" не так просто, как "передача переменной функции". Вы были почти там через атрибут "разрешить" , но, как я уже сказал, действительно не нужны для этого простого случая.

Я создал другой Plunker, не используя "scope", и сохраняя "разрешение"... невозможно ввести "modalInstance", как в случае с "items":

'$modalInstance': function() { return modalInstance; }

... потому что в данный момент все еще undefined... мы могли бы обходиться, просто позвонив $scope.$close в ModalController (и не введя модальный)...

... или, как я, ввел его через функцию... очень сумасшедший, но он работает:

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

... Я бы никогда так не делал... это просто для учебных целей!

Наконец, но не менее важно: добавив ng-controller в файл шаблона, вам требуется ModalController дважды... вы уже указали его в модальной конфигурации. Но через модальную конфигурацию вы можете получить инъекцию зависимостей через распознаватель - в то время как через шаблон вы не используете приложение "Решение".

Обновление:

Как указано в комментариях Махери, $modalInstance становится доступным для впрыска в контроллер посредством реализации AngularUI Bootstrap. Таким образом, нам не нужны никакие усилия "решить" или сделать их доступными как-то.

Вот обновленный Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

В самом деле, ошибка происходила в основном из-за атрибута "ng-controller" в шаблоне. Контроллер, созданный таким образом, не получает "обработку AngularUI". Только контроллер, указанный в модальных опциях, получает "лечение", где $modalInstance предоставляется...

Ответ 2

Я адаптировал Дж. Бруни Плункера для работы с Bootstrap3. Вы можете найти его здесь:

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

Обратите внимание, что начиная с ui-bootstrap 0.7.0 загрузка bootstrap3 будет родной, и любые проблемы, касающиеся модалов (и других директив, например, индикатор выполнения), должны быть исправлены.

Ответ 3

• Если вы предоставляете имя контроллера при открытии, а также в своем шаблоне, вы получите ту же ошибку.

• Удалите ng-контроллер из вашего шаблона

Счастливое кодирование

Ответ 4

Я получил ту же ошибку. Удалив ng-controller из шаблона, предоставляя ваш контроллер через $modal, вы можете исправить эту проблему.

$modal.open({
            templateUrl: 'MyView.html',
            controller: 'MyViewController'

        });