角度JSにモーダルにパラメータを渡す方法

Question

以下は、現在のHTMLコードです -

<div class="container"> 
     <h2>Basic Modal Example</h2> 
     <!-- Trigger the modal with a button --> 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 1</button> 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 2</button> 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 3</button> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Content of modal -- </p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div> 

     </div> 
     </div> 

    </div> 

ここでは複数のボタンが同じモーダルを呼んで。モーダルの中には、これを呼び出すボタンを決定する方法がありません。

上記のコードを変更して、パラメータをモーダルに渡すことができます。たとえば、1番目のボタンをクリックすると「ボタン1」が表示され、それがモーダルボディセクションに表示されます。

ボタンにng-clickを追加して機能を呼び出すことができます。文字列button 1/2/3をパラメータとして渡すことができます。関数の中で、渡された文字列として特定のグローバルパラメータ値を設定することができます。しかし、この関数の中からどのようにモーダルを呼び出すのですか？これが可能かどうかはわかりません。

角度JSを使用して上記を達成する方法を教えてください。

Answer 1

各ボタンのng-clickを実装して、クリックでトリガされる関数内でスコープ変数を作成することができます。同じ変数を使用することで、モーダルボディセクションを更新できるようになりました。あなたはグローバルなものを使用する必要はありません

<div class="container"> 
    <h2>Basic Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="data = 'content 1'">Open Modal 1</button> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="data = 'content 2'">Open Modal 2</button> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="data = 'content 3'">Open Modal 3</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Content of modal -- {{data}} </p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

Answer 2

：

HTMLは次のようになるでしょう。

これはresolveプロパティを使用して行うことができます。

モーダルを開くモーダル関数を呼び出す関数を定義しました。

<button ng-click="callModalFun('Btn1')">Btn1</button> 
<button ng-click="callModalFun('Btn2')">Btn2</button> 
<button ng-click="callModalFun('Btn3')">Btn3</button> 

JS：

function callModalFun(strBtnName){ 

    var modalInstance = modal.open({ 

     .., 
     resolve : { 

      data : { 

       strFromBtn : strBtnName; 
      } 
     }, 
     controller : 'myCtrl' 
    });   
} 

とコントローラでは、この1のように行います。

.controller('myCtrl',function($scope,resolveData){ 

    $scope.strBtnName = resolveData.data.strFromBtn; 

}) 

strBtnNameがテンプレートの内部にあります。