ブートストラップモーダルウィンドウを実装しようとしているため、このエラーが発生し続けます。その原因は何でしょうか?http://angular-ui.github.io/bootstrap/#/modalからすべてをここにコピー/貼り付けました。
ブートストラップモーダルウィンドウを実装しようとしているため、このエラーが発生し続けます。その原因は何でしょうか?http://angular-ui.github.io/bootstrap/#/modalからすべてをここにコピー/貼り付けました。
回答:
この種のエラーは、コントローラーやサービスなどの依存関係を書き込んだときに、その依存関係を作成または含めていない場合に発生します。
この場合、$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
});
5年後 (これは当時は問題ではなかったでしょう):
ネームスペースが変更されました。新しいバージョンのbootstrap-uiにアップグレードした後、このメッセージに遭遇する可能性があります。$uibModal
&を参照する必要があります$uibModalInstance
。
本日私が経験した問題についてのちょっとした付記:ソースコードの縮小化/醜化をオンにすると、「不明なプロバイダー:$ 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モーダルウィンドウコードが再び機能しました。
プロバイダーエラーの明白な答えは、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
それが役に立てば幸い。