不明なプロバイダー:$ modalProvider <-AngularJSでの$ modalエラー


回答:


197

この種のエラーは、コントローラーやサービスなどの依存関係を書き込んだときに、その依存関係を作成または含めていない場合に発生します。

この場合、$modalは既知のサービスではありません。角度でブートストラップするときに、依存関係としてui-bootstrapを渡さなかったようです。angular.module('myModule', ['ui.bootstrap']);また、念のため、最新バージョンのui-bootstrap(0.6.0)を使用していることを確認してください。

エラーはバージョン0.5.0でスローされますが、0.6.0に更新すると$ modalサービスが利用可能になります。そのため、バージョン0.6.0に更新し、モジュールを登録するときにui.boostrapが必要であることを確認してください。

コメントへの返信:これは、モジュールの依存関係を挿入する方法です。

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

});

更新:

$modalサービスはという名前に変更されました$uibModal

$ 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
});

1
私はui.bootstrapを追加しましたが、それでも同じエラーが発生しますか?ストラップディレクティブを追加する必要がありますか?ここで述べたように、 stackoverflow.com
questions / 18783974 /…

1
@Ranadheerあなたのリンクは角度ストラップに関するものです(これは別のライブラリです)。すでに述べたように、古いバージョンのui-bootstrapを使用しているか、依存関係を追加していません。もう1つの答えも関連しています。縮小するときに名前を渡す必要がありますが、現時点では縮小を扱っているようには思えません。
m59 2013

2
こんにちは@ m59。あなたは儀式です。古いバージョンのui-bootstrapを含めました。今、私は新しいバージョンを含めました、そしてそれはうまくいきます。ありがとうございました:-)
Ranadheer Reddy 2013

59
$ modalは$ uibModalを読み取る必要があります。わからないどのバージョンでは変更され、私はそれがuibModalInstance $作り、$ modalInstanceのための...同じくらい出なくなった作品を見つける前に仕事を得る$モーダルにしようとするこれまで過ごした
デルプ

7
彼らが何度も何度もそれを変えるのは残念です。最初は$ dialog、次に$ modal、次に$ uibModalです。ただ病気。回答を更新していただきありがとうございます。助けて頂きました。
スティーブン

54

5年後 (これは当時は問題ではなかったでしょう)

ネームスペースが変更されました。新しいバージョンのbootstrap-uiにアップグレードした後、このメッセージに遭遇する可能性があります。$uibModal&を参照する必要があります$uibModalInstance


ありがとう。2つのアプリケーションに同じコードを使用しましたが、最後のアプリケーションでは機能しませんでした。この名前の変更により、動作中のアプリケーションが壊れる可能性があります!!!
Tchaps

2
ありがとう、バージョン1.0.0以降、$ Modalと$ ModalInstanceは非推奨になりました、ここの変更
HaRoLD

$ modalInstanceは私にはまったく機能しませんでした。$ uibModalInstanceの実行
CommandZ

22

本日私が経験した問題についてのちょっとした付記:ソースコードの縮小化/醜化をオンにすると、「不明なプロバイダー:$ aProvider」という同様のエラーが発生しました。

で述べたように角度ドキュメントチュートリアル(段落:「縮小化に注」)あなたは必ず参照が依存性注入のために正しく保管されているにするために、配列の構文を使用する必要があります。

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

以下のために角度UIブートストラップたとえば、あなたはこの本を交換する必要があります言及します:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

この配列表記では:

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

その変更により、縮小したAngular UIモーダルウィンドウコードが再び機能しました。


私は彼が現在ミニファイを扱っているとは思いませんが、同じ問題を引き起こす可能性があるので、これは注目に値します。
m59 2013

github.com/btford/ngminご覧ください。縮小する前に実行できます。次に、ngminが配列バージョンに展開するときに縮小化がまだ機能している間、ショートフォームの記述を続け、引数名によってDIに依存できます。
Pascal

11

プロバイダーエラーの明白な答えは、ui-bootstrapを追加する場合のようにモジュールを宣言するときに欠落している依存関係です。私たちの多くが考慮していない1つのことは、新しいリリースにアップグレードする際の重大な変更です。はい、以下は機能し、プロバイダーエラーは発生しません。

var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);

ui-boostrapの新しいバージョンを使用している場合を除きます。モーダルプロバイダーは次のように定義されます。

.provider('$uibModal', function() {
    var $modalProvider = {
      options: {
        animation: true,
        backdrop: true, //can also be false or 'static'
        keyboard: true
      },

ここでのアドバイスは、依存関係が含まれていることを確認してもエラーが発生する場合は、使用しているJSライブラリのバージョンを確認する必要があります。また、クイック検索を実行して、そのプロバイダーがファイルに存在するかどうかを確認することもできます。

この場合、モーダルプロバイダーは次のようになります。

app.factory("$svcMessage", ['$uibModal', svcMessage]);

もう1つ注意してください。ui-bootstrapバージョンが現在のangularjsバージョンをサポートしていることを確認してください。そうでない場合、templateProviderなどの他のエラーが発生する可能性があります。

詳細については、このリンクを確認してください:

http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

それが役に立てば幸い。


また、UIブートストラップWikiには、すべてのプレフィックス変更のリストが含まれています。
bjauy

7

私は、すべての依存関係が含まれていたことを確認した後、私は名前を変更することで問題を修正$modalする$uibmodal$modalInstance$uibModalInstance


0
var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.