如何在angular JS中将参数传递给模态

Question

Below is the current HTML code --

    <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>

Here multiple buttons call the same modal. Now inside the modal there is no way to determine which button press has called this.

I want to modify the above code so that i can pass a parameter into the modal. For example, clicking on 1st button should pass "button 1" and that should be displayed in the modal body section.

I know I can add ng-click to the buttons and call a function. I can pass the string button 1/2/3 as its parameter. Inside the function I can set a particular global parameter value as the string passed. But how do I invoke the modal from inside this function? I am not sure whether this is even possible.

Please let me know how I can achieve the above using angular JS.

Answer 1

You can implement ng-clicks of each button and then can create a scope variable inside the function that gets triggered on click. And by using the same variable you can now update the modal body section.

HTML Would be like:

<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

You don't need to use global things.

You can do it using resolve property.

defined the function which will going to call your modal function which open the modal.

<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'
    });          
}

and in the controller do like this one.

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

    $scope.strBtnName = resolveData.data.strFromBtn;

})

strBtnName is available inside of the template.