Provedor desconhecido: $ modalProvider <- $ erro modal com AngularJS

Respostas:

197

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) {

});

Atualizar:

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
});
m59
fonte
1
Eu adicionei ui.bootstrap e continuo recebendo o mesmo erro? precisamos adicionar diretiva de cinta? como dito aqui stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Seu link é sobre cinta angular (que é uma biblioteca diferente). Como eu disse, você está usando a versão mais antiga do ui-bootstrap ou não adicionou a dependência. A outra resposta também é relevante, que você precisa passar o nome ao minimizar, mas não parece que você está lidando com minificação no momento.
m59,
2
Olá @ m59. Você é um rito. Incluí a versão antiga do ui-bootstrap. Agora incluí a nova versão e está funcionando bem. Muito obrigado :-)
Ranadheer Reddy
59
O $ modal agora deve ler $ uibModal. Não tenho certeza em qual versão mudou, mas gastei muito tempo tentando fazer com que $ modal funcionasse antes de descobrir que não funciona mais ... O mesmo para $ modalInstance, torne-o $ uibModalInstance
delp
7
É uma pena que eles mudem isso indefinidamente. Primeiro $ diálogo, depois $ modal, agora $ uibModal. Só doente. Obrigado por atualizar a resposta. Me ajudou.
Steven
54

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.

Brent
fonte
Obrigado. Usei o mesmo código para 2 aplicativos, mas não estava funcionando para o último. Esta mudança de nomenclatura pode interromper o aplicativo de trabalho !!!
Capítulos
2
Obrigado !, A partir da versão 1.0.0 $ Modal e $ ModalInstance foram descontinuados, changelog aqui
HaRoLD
$ modalInstance totalmente NÃO funcionou para mim. $ uibModalInstance fez
CommandZ
22

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.

CREOFF
fonte
Não acho que ele esteja lidando com a minimização agora, mas isso é importante observar, pois também pode causar o mesmo problema.
m59,
Dê uma olhada em github.com/btford/ngmin Você pode executá-lo antes da minificação. Você pode então continuar escrevendo a forma abreviada e depender de DI por nomes de argumento enquanto a minificação ainda funciona, pois o ngmin se expande para a versão do array.
Pascal
11

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.

Ozkary
fonte
E o wiki do ui bootstrap contém uma lista de todas as mudanças de prefixo.
bjauy de
7

depois de verificar se todas as dependências estavam incluídas, resolvi o problema renomeando $modalpara $uibmodale $modalInstancepara$uibModalInstance

Iogue
fonte
0 
var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];
Walter Rivera
fonte