web-dev-qa-db-ja.com

JavaScriptを使用してAngularJSブートストラップUIでモーダルウィンドウを呼び出す

ここ という例を使用して、ボタンをクリックする代わりにJavaScriptを使用してモーダルウィンドウを呼び出す方法を教えてください。

私はAngularJSに慣れていないので、幸運なことに here および here というドキュメントを検索してみました。

ありがとう

angularjsmodal-dialogangular-ui-bootstrap
73
Ahmad Alfy

さて、まず最初に 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/diag/README.md

75
pkozlowski.opensource

角度ui $ modalをブートストラップ3で機能させるには、スタイルを上書きする必要があります。

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

（最後のものはあなたがカスタムディレクティブを使用する場合に必要です）そしてhtmlを次のようにカプセル化します。

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
29
Hawk

ダイアログにデータを渡してモーダルウィンドウを開く

誰かがダイアログにデータを渡すことに興味があるならば：

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

      $scope.ok = function () {
        $modalInstance.close();
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

デモ Plunker

27
Maxim Shoustin

早くて汚い方法！

これは良い方法ではありませんが、私にとっては最も単純な方法のようです。

モーダルdata-targetとdata-toggleを含むアンカータグを追加し、それに関連付けられたIDを持ちます。 （ほとんどの場合、HTMLビューのどこにでも追加できます）

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

今、

角度コントローラーの内側で、モーダルをトリガーしたい場所から使用するだけです

angular.element('#myModalShower').trigger('click');

これは角度コードに基づいてボタンへのクリックを模倣し、モーダルが表示されます。

17
Gagandeep Singh

AngularJSブートストラップWebサイトは、最新のドキュメントで更新されていません。約3ヶ月前、pkozlowski-opensourceが$ modalを$ dialog commitから切り離すための変更を下記に示しました。

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

そのコミットの中で彼は$ modalのための新しい文書を追加しました。

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md 。

お役に立てれば！

17
Craig Ruks

Maxim Shoustinが提供するものと同様の異なるバージョン

答えは気に入りましたが、私を悩ませたのは、<script id="...">をモーダルのテンプレートのコンテナとして使用することでした。

モーダルのテンプレートを非表示の<div>に配置し、内側のhtmlをmodal_html_templateと呼ばれるスコープ変数にバインドしたいと思いました。 <div>の代わりに<script id="...">内のテンプレートのhtml

この変数は、$modal({... 'template': $scope.modal_html_template, ...})を呼び出すときに使用されます

内側のhtmlをバインドするために、簡単なディレクティブであるinner-html-bindを作成しました

例を確認してください plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bindディレクティブ：

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});
4
Jossef Harush