Угловой UI Bootstrap Modal: [$injector: unpr] неизвестный поставщик: $uibModalInstanceProvider

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

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

ошибка: [$injector: unpr] неизвестный поставщик: $uibModalInstanceProvider

вот мой 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();
}]);

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

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

какие мысли? Это заставляло меня подниматься по стене почти 2 дня сейчас.

* EDIT*

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

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

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

спасибо!

20
angular-bootstrap angular-ui-bootstrap angular-ui-modal angularjs

5 ответов

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

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

44

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

20

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

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

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

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

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