Проблема с модальным окном (неизвестный поставщик: ModalInstanceProvider)

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

Неизвестный провайдер: $modalProvider ‹- $modal error with AngularJS (кажется У меня последняя версия ui-bootstrap)

И все остальные, кажется, имеют проблемы с областью действия с модальным, но я не могу начать с модального, поэтому я думаю, что они не связаны. Подскажите, пожалуйста, если я ошибаюсь и как быть:

Проблема области действия в AngularJS с использованием AngularUI Bootstrap Modal

Проблемы с модальным интерфейсом Angular

Я взял скрипт ui-bootstrap-tpls-0.6.0.min.js отсюда: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files, и я даже попытался добавить скрипт ui-bootstrap-0.6.0.min.js, думая, что он, возможно, нужен. Хотя, если я правильно прочитал, кажется, что если бы я выбрал скрипт ui-bootstrap-0.6.0.min.js, мне также нужно было бы получить все шаблоны здесь https://github.com/angular-ui/bootstrap/tree/master/template Это похоже на тот случай, если я использую только этот скрипт на основе ошибок:

Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html

Я создал плункер со всем для простоты объяснения структуры и т. д. и вставил сюда весь код.

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

Ошибка (которую вы можете увидеть, протестировав код на плункере с открытой консолью) следующая:

Error: Unknown provider: $modalInstanceProvider <- $modalInstance
     at Error (<anonymous>)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
     at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
     at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
     at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
     at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)

Если кто-нибудь может дать какое-либо представление о том, что я могу делать неправильно здесь. Это не похоже на проблему масштаба. Больше похоже на проблему с настройкой или, возможно, на то, как я загружаю приложение вручную?


angularjs angular-ui-bootstrap angular-ui
person edward.louis    schedule 06.10.2013    source источник
comment
В ui.bootstrap 0.10.0 кажется, что диалог наследует $scope.$close(); и $scope.$dismiss(reason) без необходимости вводить modalInstance.   -  person Mwayi    schedule 30.03.2014
comment
То же самое относится и к объему родителя. Нет необходимости вводить resolve: {items: function(){return $scope.items}}, так как он уже будет унаследован   -  person Mwayi    schedule 30.03.2014

Ответы (4)


arrow_upward
34
arrow_downward

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

Как «внедрить услугу»?

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

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

Редактировать:

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

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

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

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

Это видео тоже очень-очень хорошее, но оно не дает более глубокого понимания концепций:

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

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

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

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

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

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

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

Я создал еще один плункер, не используя «область» и сохраняя «разрешение»… невозможно внедрить «modalInstance», как мы делаем с «элементами»:

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

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

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

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

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

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

Обновлять:

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

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

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

person J. Bruni    schedule 06.10.2013
comment
Отличное объяснение. Можете ли вы сказать мне, почему вы говорите, что второй плунжер сумасшедший, но он работает? Мне кажется, что второй метод передает элементы области действия модальному модулю, где другой напрямую обращается к элементам области действия. Думаю, я просто пытаюсь понять масштаб; или, скорее, правильное его использование. Я обязательно буду более внимательно читать все эти концепции. Есть ли преимущество в том, чтобы не использовать разрешение? Или, может быть, лучше спросить, когда лучше использовать, а когда нет? Еще раз спасибо за подробное объяснение. - person edward.louis; 06.10.2013
comment
Сумасшествие, но это работает — потому что слишком сложно выполнить такую ​​простую задачу. Эта реализация имеет смысл только для изучения - чтобы поиграть и посмотреть, как все работает, - но не для реального в простом случае, подобном этому. Resolve доступен как способ внедрения данных в контроллер при его создании. Используйте его, когда вам это нужно. Нет никакого преимущества в использовании расширенного ресурса без необходимости в нем. Единственное преимущество заключается в том, что когда вам нужно что-то внедрить в контроллер, разрешение предлагает способ сделать это. Я использую много модальных окон, и мне это еще не нужно. - person J. Bruni; 07.10.2013
comment
Единственное использование разрешения, которое я сделал на данный момент, было не для модальных окон, а для маршрута конфигурация. Я прочитал эту статью о динамически загружаемых контроллерах, потребовалось некоторое время, чтобы подробно изучить ее, и я адаптировал ее решение под свои нужды. В этом случае я не представляю, как выполнить задачу без разрешения - другими словами, оно нам действительно нужно для решения задачи. - person J. Bruni; 07.10.2013
comment
Итак, вкратце, когда самое подходящее время для использования? - когда вам это нужно. А если вопрос в том, когда вам это нужно? - Я не могу ответить, потому что мне это еще не нужно для модальных окон - несмотря на то, что я их много использую (но в основном для простых диалогов подтверждения). - person J. Bruni; 07.10.2013
comment
Ну поставь снова. Для учебы именно поэтому и был поднят вопрос. Я просто пытаюсь использовать очень простые и, скорее всего, многоразовые случаи, такие как открытие модальных окон, но с идеей, что у каждого модального окна могут быть разные данные, которые он будет обрабатывать (например, один для входа в систему, другой для регистрации), поэтому я мог бы создать один контроллер, который обрабатывает все мои модальные окна для разделения кода. Я считаю, что это (организация кода и способ передачи данных от одного объекта к другому) и область действия в тандеме являются моими самыми большими препятствиями в angular на данный момент. - person edward.louis; 07.10.2013
comment
Я уже столкнулся с другой проблемой, которая более специфична для области, которая объяснила некоторые вещи, но в то же время вызвала больше вопросов, которые, я думаю, скоро опубликую еще один вопрос. Следите за собой. ;) ржу не могу - person edward.louis; 07.10.2013
comment
$modalInstance на самом деле является modalInstance, который вы создаете в родительском контроллере. Когда вы вызываете open(), он передает этот экземпляр дочернему контроллеру. - person mahery rafara; 07.10.2013
comment
Прототипное наследование происходит для областей действия, а не для контроллеров. - person J. Bruni; 07.10.2013
comment
вы рассуждаете правильно, если следуете официальной концепции Angularjs. Однако они решили реализовать ui.bootstrap.modal иначе. Источник: исходный код. Я уже спрашивал на гитхабе, почему так сделано. $modalInstance не нужно вводить, он уже есть в open(). - person mahery rafara; 08.10.2013
comment
Действительно, @maheryrafara - он автоматически предоставляется инжектору как $modalInstance - нет необходимости делать его доступным. Ты видел это, @edward.louis? Я обновлю свой ответ. Источник: github.com/angular-ui/ bootstrap/blob/master/src/modal/ - person J. Bruni; 09.10.2013
comment
Я думаю, что в этом посте проблема больше похожа на проблему: modalinstanceprovider"> stackoverflow.com/questions/21020715/ - person Panais; 16.12.2014

arrow_upward
3
arrow_downward

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

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

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

person Kulbi    schedule 31.10.2013

arrow_upward
3
arrow_downward

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

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

Удачного кодирования

person Ali Adravi    schedule 25.08.2015

arrow_upward
1
arrow_downward

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

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

        });
person Omal Withanage    schedule 10.02.2016