web-dev-qa-db-ja.com

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

bootstrapモーダルウィンドウを実装しようとしているため、このエラーが引き続き表示されます。その原因は何でしょうか？ http://angular-ui.github.io/bootstrap/#/modal からすべてをコピー/貼り付けました。

javascriptangularjsmodal-dialog
95
Xeen

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

この場合、$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
});
194
m59

5年後（これは当時問題ではなかったでしょう）：

名前空間が変更されました-bootstrap-uiの新しいバージョンにアップグレードした後、このメッセージに出くわすことがあります。 $uibModal＆$uibModalInstanceを参照する必要があります。

53
Brent

今日私が経験した問題についての補足説明：ソースコードの"Unknown provider：$ aProvider"をminification/uglifyに切り替えたときに同様のエラーが発生しました。

Angular docs tutorial（段落： "A Minification on Minification"） で述べたように、配列構文を使用して、依存関係注入のために参照が正しく保持されるようにする必要があります。

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

Angular UI Bootstrap example の場合、これを置き換える必要があります：

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モーダルウィンドウコードが再び機能するようになりました。

22
CREOFF

プロバイダーエラーの明白な答えは、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バージョンが現在のanglejsバージョンをサポートしていることを確認してください。そうでない場合は、templateProviderなどの他のエラーが発生する場合があります。

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

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

それが役に立てば幸い。

11
ozkary

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

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