Угловой 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) Кроме того, у меня почти идентичный код работает в другой части моего приложения. Единственная разница в том, что он работает через фабрику. В противном случае, код идентичен. Таким образом, я уверен, что все мои зависимости есть, и версии верны. Так. Долбанные. Странный.
спасибо!
5 ответов
Ответ Найден! После взлома с моим другом, мы нашли ответ. Я хотел разместить его здесь на случай, если кто-то еще читает это.
оказывается, у нас был ng-контроллер в нашем модальном окне, который был в теге div, который обернул всю html-форму, которая была в модальном. Раньше это работало нормально, когда наша форма не была в модальном (у нее был отдельный URL), но по какой-то причине она ломается, когда она находится в модальном. Ng-контроллер ссылался на addEntryCtrl
. Сразу после его удаления, форма работает!
проблема заключалась в том, что вы указывали (или двойные) контроллер(ы) в 2 местах - при открытии модального и внутри шаблона - это не нужно. удалить ng-контроллер из шаблона и все будет работать, как ожидалось.Поверь мне, это сработает.
получается, что если указать контроллер внутри 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();
}]);
вы пытаетесь ссылаться на контроллер, который является частью отдельного модуля. Для того, чтобы это работало, вам нужно ввести дополнительный модуль (addEntry) в ваш основной модуль (nav):
var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
Как вы используете $uibModal.откройте () (см. ниже) и явно укажите контроллер имя, вы не должны поставить директиву ng-контроллер в шаблоне. Это вызывает ошибку. Нет!--2-->ng-контроллер на посмотреть !
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'addEntry/addEntry.html',
controller: 'addEntryCtrl',
});