Continuo recebendo esse erro enquanto tento implementar a janela Modal de bootstrap. Qual poderia ser a causa disso? Copiei / colei tudo de http://angular-ui.github.io/bootstrap/#/modal aqui.
Continuo recebendo esse erro enquanto tento implementar a janela Modal de bootstrap. Qual poderia ser a causa disso? Copiei / colei tudo de http://angular-ui.github.io/bootstrap/#/modal aqui.
Respostas:
Este tipo de erro ocorre quando você escreve em uma dependência para um controlador, serviço, etc, e você não criou ou incluiu essa dependência.
Nesse caso, $modalnão é um serviço conhecido. Parece que você não passou o ui-bootstrap como uma dependência durante o bootstrap do angular. angular.module('myModule', ['ui.bootstrap']);Além disso, certifique-se de estar usando a versão mais recente do ui-bootstrap (0.6.0), apenas por segurança.
O erro é lançado na versão 0.5.0, mas atualizar para 0.6.0 torna o serviço $ modal disponível. Portanto, atualize para a versão 0.6.0 e certifique-se de exigir ui.boostrap ao registrar seu módulo.
Respondendo ao seu comentário: É assim que você injeta uma dependência de módulo.
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">js:
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
});O $modalserviço foi renomeado para $uibModal.
Exemplo usando $ uibModal
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
//code here
});5 anos depois (este não teria sido o problema na época) :
O namespacing mudou - você pode tropeçar nesta mensagem após atualizar para uma versão mais recente do bootstrap-ui ; você precisa se referir a $uibModal& $uibModalInstance.
Apenas uma observação extra para um problema que também experimentei hoje: recebi um erro semelhante "Provedor desconhecido: $ aProvider" quando ativei a minificação / uglify do meu código-fonte.
Conforme mencionado no tutorial de documentos Angular (parágrafo: "Uma Nota sobre Minificação"), você deve usar a sintaxe de array para garantir que as referências sejam mantidas corretamente para injeção de dependência:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];Para o exemplo Angular UI Bootstrap que você mencionou, deve substituí-lo:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}com esta notação de matriz:
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];Com essa mudança, meu código de janela modal da IU Angular minimizado estava funcional novamente.
A resposta óbvia para o erro do provedor é a falta de dependência ao declarar um módulo, como no caso de adicionar ui-bootstrap. A única coisa que muitos de nós não levamos em consideração são as mudanças significativas ao atualizar para uma nova versão. Sim, o seguinte deve funcionar e não gerar o erro do provedor:
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);Exceto quando estamos usando uma nova versão do ui-boostrap. O provedor modal agora é definido como:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},O conselho aqui é que, uma vez que tenhamos certeza de que as dependências estão incluídas e ainda recebamos esse erro, devemos verificar qual versão da biblioteca JS estamos usando. Também poderíamos fazer uma pesquisa rápida e ver se esse provedor existe no arquivo.
Nesse caso, o provedor modal agora deve ser o seguinte:
app.factory("$svcMessage", ['$uibModal', svcMessage]);Mais uma nota. Certifique-se de que sua versão do ui-bootstrap suporta sua versão atual do angularjs. Caso contrário, você pode obter outros erros como templateProvider.
Para obter informações, consulte este link:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
espero que ajude.
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];