angular.js - angularjs $modal的用法

Question

如何使用angularjs $modal编写一个公用的弹框插件？望详解，谢谢。

Answer 1

アイデアは伝えますが、他の人に連絡するのは好きではないので詳しくは説明しません...計画は渡します、少なくとも頭を使って考えてください。

まず、次のコードは ui-bootstrap の $modal を使用していませんが、ng-strap の $modal を使用しています。その理由は、後者のコード品質は前者よりも優れていると思うためですが、後者は比較的新しく、 API が前者ほど完成されていないため、比較的高い実践スキルが必要ですが、これは次に説明する $modal サービスの拡張とは関係ありません。

第 2 に、パブリック $modal サービスを拡張する前に次の問題を考慮する必要があります:

1. 再利用できるものは何ですか? (おそらく) 毎回新たに指定する必要があるものはどれですか? (テンプレート、パラメータ、メソッドなど)
2. 予想される呼び出し方法は何ですか?返された結果はどのようになりますか?
3. 拡張性と柔軟性の要件はどの程度ですか?

これらの質問に対する明確な答えは最初はありませんが、サービスの書き方が決まるため、頭の中で答えをシミュレーションする必要があります。

最初のステップは、デフォルトのパラメータを準備することです。これらは、元の $modal によって提供されるパラメータです。最初に (独自のニーズに従って) 初期状態を設定します。 リーリー

ステップ 2: 新しいサービスが元の $modal と同じ属性拡張機能を持つことができるように、新しいサービスの属性拡張コードを作成します。 リーリー

次に、

の定義があり、最終的に $promise を返します。これにより、呼び出し元がビジネス ロジックを拡張できるようになります。要点にコメントを追加しました。残りは自分で理解できます。 リーリー

通話例:ConfirmModal リーリー

テンプレートについては、元の $modal を参照して自分で書き直すだけです。コードは github で入手できます。それだけです。