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 to modalInstance
  • поставьте мой addEntryCtrl внутри моего ModalInstance

Любые мысли? Это привело меня к стенке уже почти 2 дня.

* РЕДАКТИРОВАТЬ *

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

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

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

Спасибо!

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

Оказывается, если вы укажете контроллер внутри 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();
}]);

Ответ 4

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

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

Ответ 5

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

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