Angular UI Bootstrap Modal: [$injector:unpr] Неизвестный провайдер: $uibModalInstanceProvider

Это немного странно. Когда я ищу эту проблему в Интернете, я вижу много страниц результатов Google и решений SO... но ни одна из них не работает!

Короче говоря, я пытаюсь реализовать AngularUI Bootstrap Modal. Я продолжаю получать следующую ошибку:

Ошибка: [$injector:unpr] Неизвестный провайдер: $uibModalInstanceProvider ‹- $uibModalInstance ‹- addEntryCtrl

Вот мой HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

Вот мой контроллер:

var app = angular.module('nav', ['ui.bootstrap']);

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'addEntry/addEntry.html',
      controller: 'addEntryCtrl',
    });
  };
}]);

И, наконец, вот мой модальный код:

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };

  $uibModalInstance.close();
}]);

Решения, которые я пробовал:

  • обновлены как Angular Bootstrap (версия: 0.14.3), так и Angular (v1.4.8)
  • изменил uibModalInstance на modalInstance
  • изменен $uibModalInstance на modalInstance
  • поместите мой addEntryCtrl в мой ModalInstance

Есть предположения? Это вело меня к стене уже почти 2 дня.

* ИЗМЕНИТЬ *

Я должен отметить две вещи:

1) когда я удаляю $uibModalInstance как зависимость от addEntry, мои кнопки отправки HTML-формы работают нормально, и форма выглядит идеально. Даже редирект происходит корректно (при отправке). Проблема остается: модальное окно все еще остается на экране и выдается ошибка, что $uibModalInstance не определен. Это имеет смысл, так как я удалил его как зависимость, но мне, очевидно, все еще нужно, чтобы модальное окно закрывалось при отправке.

2) Кроме того, у меня почти идентичный код работает в другой части моего приложения. Единственная разница в том, что он работает через фабрику. В остальном код идентичен. Таким образом, я уверен, что все мои зависимости есть и версии верны. Так. Черт. Странный.

Спасибо!


person Benjamin Hoffman    schedule 26.11.2015    source источник
comment
Являются ли эти блоки кода внутри IIFE? В противном случае вы перезаписываете переменную app (может возникнуть проблема). Кроме того, ваш второй блок кода содержит незамкнутую функцию и массив. Вероятно, это опечатка, или вы просто пропустили последние части, но вы должны попытаться сделать код в своих вопросах полным.   -  person Phil    schedule 26.11.2015
comment
Кроме того, я видел эту же ошибку раньше (stackoverflow.com/q/33600137/283366), но этот вопрос не т получить какие-либо полезные ответы. К вашему сведению, $uibModalInstance отлично работает в моих приложениях   -  person Phil    schedule 26.11.2015
comment
Есть ли шанс, что вы используете ui-bootstrap 0.14.2? $uibModalInstance был добавлен в 0.14.3 ~ github.com/angular-ui/bootstrap/issues/ 4778   -  person Phil    schedule 26.11.2015
comment
@Фил, спасибо за ответ! 1) я отредактировал свой код, включив в него закрывающие скобки, 2) я включил версию бутстрапа и углового..... до сих пор нет кости :(   -  person Benjamin Hoffman    schedule 26.11.2015


Ответы (5)


Ответ найден! После взлома с моим другом мы нашли ответ. Я хотел опубликовать это здесь на всякий случай, если кто-то еще прочитает это.

Оказывается, у нас был ng-контроллер в нашем модальном окне, который был в теге div, обертывающем всю html-форму, которая была в модальном окне. Раньше это работало нормально, когда наша форма НЕ была модальной (у нее был отдельный URL-адрес), но по какой-то причине она ломалась, когда была модальной. Контроллер ng ссылался на файл addEntryCtrl. Сразу после удаления форма заработала!

person Benjamin Hoffman    schedule 29.11.2015
comment
Большое спасибо, я искал правильный ответ на эту проблему, это должно быть написано где-то в документации ui.bootstrap. - person Jesuso Ortiz; 08.01.2016
comment
Спасибо за ответ - person adelmo00; 19.02.2016
comment
Спасибо за обновления. Это помогло мне найти альтернативное решение, позволяющее использовать ng-controller из представления. Смотрите мой ответ для более подробной информации! - person Arjan Einbu; 16.03.2016
comment
Точно моя проблема. Проголосуйте за свой ответ. Спасибо. - person isxpjm; 22.03.2016
comment
Была точно такая же проблема, ваш ответ, наконец, решил мою проблему после нескольких часов поиска. Спасибо! - person ISAE; 18.06.2020

Проблема заключалась в том, что вы указывали (или двойной) контроллер (ы) в 2 местах - при открытии модального окна и внутри шаблона - это не нужно. Удалите ng-controller из шаблона, и все будет работать, как положено. Поверьте мне, это сработает.

person napoleonjk    schedule 05.03.2016
comment
Это лучший ответ. - person Jeremey; 07.06.2016
comment
Это именно та проблема, с которой я сталкиваюсь. Поскольку я просто хочу использовать директиву, у меня нет собственного контроллера. Я поместил контроллер директивы в тег, это вызвало проблему. Удаление атрибута ng-controller отлично решило эту проблему. Спасибо! - person hailong; 20.12.2016
comment
Этот ответ совершенно неверен. Проверьте эту скрипту: jsfiddle.net/s8bLdg2d или этот plnkr plnkr.co/edit/FElOoLllZmT7kaGVtz5V?p=preview - person lin; 23.11.2017
comment
Это лучший ответ. Так держать. - person PAWAN RAJ Shakya; 12.02.2018

Оказывается, если вы укажете контроллер внутри html-шаблона (с ng-controller="..."), он не разрешит $uibModalInstance. Указание контроллера из вызова $uibModal.open({controller="...", ...}) позволит правильно разрешить его.

Поскольку вам нужны только методы dismiss() и close(), вы можете вместо этого получить их из $scope (с именами $dismiss и $close), так как это будет правильно разрешаться в обоих способах создания экземпляра контроллера.

var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss('cancel');
    };

    $scope.$close();
}]);
person Arjan Einbu    schedule 16.03.2016

Вы пытаетесь сослаться на контроллер, который является частью отдельного модуля. Чтобы это работало, вам нужно внедрить дополнительный модуль (addEntry) в ваш основной модуль (nav):

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
person Andy W    schedule 26.11.2015
comment
Хороший совет, но это, конечно, не источник ошибки ОП. - person Phil; 26.11.2015
comment
отличный совет. я добавил это. не решил мою проблему, хотя :( - person Benjamin Hoffman; 26.11.2015
comment
@BenjaminHoffman, вы забыли включить файл скрипта (угловой UI Bootstrap)? - person NPToita; 26.11.2015
comment
@NPToita, если вы имеете в виду зависимость начальной загрузки пользовательского интерфейса ang ... да, я сделал это через Bower. ;) - person Benjamin Hoffman; 26.11.2015
comment
когда вы говорите, что это проблема со ссылками, можете ли вы быть более конкретным? я искал это в Google, но не нашел игральных костей.... было бы здорово, @NPToita, спасибо! - person Benjamin Hoffman; 28.11.2015

Поскольку вы используете $uibModal.open() (см. ниже) и явно указываете имя controller, вам не следует помещать директиву ng-controller в шаблон. Это вызывает ошибку. Нет ng-controller в виде!

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});
person icedfluid    schedule 06.12.2016