如何在angular 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”，它应该显示在模态主体部分中。

我知道我可以在按钮上添加ng-click并调用一个函数。 我可以传递字符串button 1/2/3作为参数。 在函数内部，我可以将特定的全局参数值设置为传递的字符串。 但是如何从这个函数中调用模态？ 我不确定这是否可行。

请告诉我如何使用angular JS实现上述功能。

Answer 1

您可以实现每个按钮的ng-clicks，然后可以在单击时触发的函数内创建范围变量。 通过使用相同的变量，您现在可以更新模态体部分。

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

您不需要使用全局的东西。

您可以使用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'
    });          
}

并且在控制器中确实喜欢这个。

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

    $scope.strBtnName = resolveData.data.strFromBtn;

})

strBtnName在模板内部可用。