web-dev-qa-db-ja.com

モーダルウィンドウの問題（不明なプロバイダー：ModalInstanceProvider）

AngularJSの新機能で、このエラーの意味がわからないようです。私は同じエラーを持つ他のいくつかを見つけましたが、それらの問題は私のものと相関していないようです。

不明なプロバイダー：$ modalProvider <-AngularJSでの$ modalエラー （最新のui-bootstrapバージョンを持っているようです）

そして、他のすべてがモーダルでスコープの問題を抱えているように見えますが、モーダルを最初から取得できないようですので、これらは関連していないと思います。私が間違っているかどうか、そしてどのようにそうなのか教えてください：

AngularUIを使用したAngularJSのスコープの問題Bootstrap Modal

Angular UIモーダル）の範囲の問題

私はui-bootstrap-tpls-0.6.0.min.jsここからスクリプト： https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files そして私はui-bootstrap-0.6.0.min.jsスクリプトは、おそらく必要であると考えていました。ちゃんと読んだら、ui-bootstrap-0.6.0.min.jsスクリプトここにあるすべてのテンプレートも取得する必要があります https://github.com/angular-ui/bootstrap/tree/master/template 使用する場合エラーに基づいたスクリプトのみ：

Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html

ここでは、構造などの説明とすべてのコードの貼り付けを簡単にするために、すべてを備えたプランカーを作成しました。

http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview

エラー（コンソールを開いた状態でplunkerのコードをテストすることで確認できます）は次のとおりです。

Error: Unknown provider: $modalInstanceProvider <- $modalInstance
     at Error (<anonymous>)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
     at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
     at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
     at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
     at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)

誰かが私がここで間違っているかもしれないことについての洞察を与えることができれば。スコープの問題ではないようです。セットアップの問題、またはアプリを手動でブートストラップする方法のようなものですか？

angularjsangular-uiangular-ui-bootstrap
20
edward.louis

$modalサービスを依存関係として注入していないようです。

「サービスを注入する」方法

サービスを使用しようとしているfunctionを考えてみてください...次のように宣言する必要があります。

['$modal', function($modal) {
    // $modal has been injected here, you can use it
}]

編集：

Plunkを学習しました...単純なことを複雑にしすぎており、AngularJSの概念（コントローラー、スコープなど）についての誤解を明らかにしています。

また、AngularJSと互換性のないBootstrapの3 CSSを使用していましたBootstrap現在。CSSリンクをBootstrap 2.に変更しました。

はるかにシンプルで効果的な方法をご覧ください： http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview

このドキュメントを最初から最後まで注意深く学習することをお勧めします。 http://docs.angularjs.org/guide/concepts

このビデオも非常に優れていますが、概念に関するより深い洞察を提供していません： http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals -in-60-ish-minutes.aspx

基本的に、エラーメッセージは、サービス（何かの場合は「ModalController」）にサービスを注入しようとしていることを伝えていましたが、このサービスは見つかりませんでした。

「どのように注入しようとしたのですか？」 -あなたは尋ねることができます。答えは次のとおりです。コントローラー関数に必要なパラメーターはすべて、「注入」される「依存関係」であり、AngularJS「インジェクター」サービスがこのタスクを実行します。これが、 "$ scope"パラメーターが魔法のように "scope"を受け取る方法です-背後で動作するインジェクターです。

ModalControllerで、インジェクターは「$ modalInstance」と「items」の両方の依存関係を満たそうとしました（「$ modalInstance」パラメーターを削除-エラーメッセージは「itemsProvider not found」に変わります）...

このような依存関係を受け取りたい場合は、インジェクターの「魔法の」作業を通して、これらの名前でサービスを作成/宣言する必要があります...（または、実行しようとして「解決」属性を適切に使用します）.. 。

...しかし、これはこの場合まったく必要ありません。 「アイテム」にアクセスし、選択したアイテムを返すだけです。また、モーダルをプログラムで閉じたり、閉じたりしようとしました。

「resolve」属性を使用して依存関係を解決できますが、単純さで達成できることをそれほど複雑にするのはなぜですか？代わりに「scope」属性を使用し、モーダルにスコープを提供します-モーダルはプロパティにアクセスできます。また、モーダルは「$ close」および「$ dismiss」関数をスコープに自動的に追加するため、これらの関数を簡単に使用できます。

属性をサービスとしてモーダルコントローラーに注入することにより、メインスコープからモーダルスコープに属性を渡そうとしました！ :-)コントローラーに独自のモーダルインスタンスを挿入しようとしました!!!

したがって、あなたの主な問題は$injectorに関連しています-これが何であるかを研究する価値がありますinjectすべてについて-それは上記のリンクされた文書で説明されています。

「サービスの注入」は「変数を関数に渡す」ほど単純ではありません。あなたは「解決」属性を通してほとんどそこにいましたが、私が言ったように-この単純なケースには本当に必要ありません。

「スコープ」を使用せずに「解決」を保持せずに別のプランカーを作成しました...「アイテム」で行うように「モーダルインスタンス」を注入することはできません。

'$modalInstance': function() { return modalInstance; }

...現時点ではまだundefinedなので... ModalControllerで$scope.$closeを呼び出すだけで回避できます（モーダルを挿入しません）...

...または、私がやったように、関数を通してそれを注入します...非常にクレイジーですが、それは動作します：

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

...私はこれが好きではないだろう...それは単に学習目的のためです！

最後になりましたが、テンプレートファイルにng-controllerを追加すると、ModalControllerが2回必要になります...既にモーダル構成で指定しています。ただし、モーダル構成を使用すると、リゾルバーを介して依存関係を注入できますが、テンプレートを使用すると、「解決」を適用できません。

更新：

Maheryのコメントで指摘されているように、$modalInstanceはAngularUI Bootstrap実装によってコントローラーに注入できるようになっています。したがって、 "resolve"またはmake何とか利用できます。

更新されたPlunkerは次のとおりです。 http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

実際、エラーは主にテンプレートの「ng-controller」属性が原因で発生していました。この方法で作成されたコントローラーは、「AngularUI処理」を受け取りません。モーダルで指定されたコントローラーのみoptionsは、$modalInstanceが提供される「処置」を受け取ります...

34
J. Bruni

J. Bruni's PlunkerをBootstrap3で動作するように適合させました。ここで見つけることができます：

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

Ui-bootstrap 0.7.0以降、bootstrap3のサポートはネイティブになり、モーダル（および他のディレクティブ、プログレスバーなど）に関する問題は修正する必要があることに注意してください。

3
Kulbi

  1. テンプレートを開いているときにコントローラー名を指定すると、同じエラーが発生します。

  2. テンプレートからng-controllerを削除します

ハッピーコーディング

3
Ali Adravi

同じエラーが発生しました。テンプレートからng-controllerを削除し、$ modalを介してコントローラーを提供すると、この問題を修正できます。

$modal.open({
            templateUrl: 'MyView.html',
            controller: 'MyViewController'

        });
0
Omal Withanage