AngularJS Bootstrap UIでJavaScriptを使ってモーダルウィンドウを呼び出す

質問

前述の例を用いて ここで のように、ボタンをクリックする代わりに JavaScript を使用してモーダルウィンドウを呼び出すにはどうすればよいでしょうか？

私はAngularJSの初心者で、ドキュメントを検索してみました。 ここで と はこちら を追加しました。

ありがとうございます。

どのように解決するのですか？

さて、ではまず http://angular-ui.github.io/bootstrap/ には <modal> ディレクティブと $dialog サービスを使用し、その両方をモーダルウィンドウを開くために使用することができます。

違いは <modal> ディレクティブでは、モーダルのコンテンツがホスティングテンプレート (モーダルウィンドウを開くきっかけとなるもの) に埋め込まれることです。そのため $dialog サービスははるかに柔軟で、モーダルのコンテンツを別のファイルからロードしたり、AngularJS コード内の任意の場所（コントローラ、サービス、別のディレクティブなど）からモーダルウィンドウをトリガーしたりすることが可能です。

JavaScript のコードを使用する」というのが正確には何を意味するのかわかりませんが、AngularJS のコード内の任意の場所を意味すると仮定すると $dialog サービスはおそらく行くべき道です。

非常に使いやすく、最もシンプルな形ではただ書けばいいだけです。

$dialog.dialog({}).open('modalContent.html');  

どのような JavaScript コードでも本当にトリガーできることを示すために、ここではコントローラがインスタンス化されてから 3 秒後にタイマーを使ってモーダルをトリガーするバージョンを示します。

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

これは、このplunkで実際に見ることができます。 http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

最後に、このメソッドの完全なリファレンス・ドキュメントを紹介します。 $dialog サービスの完全なリファレンスドキュメントです。 https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md