使用angularJS组件方式时如何将数据传递给引导模式答案

【问题标题】：How can I pass data to a bootstrap modal when use angularJS components way使用angularJS组件方式时如何将数据传递给引导模式
【发布时间】：2016-06-19 01:52:42
【问题描述】：

我有 3 个组件：

第一个用于页面显示， 2nd 显示一个 ng-repeat 表，其中包含从数据库中获取的数据，第三个是引导模式。

当我单击表格中的单元格时，会弹出模式并能够编辑单元格中的数据。但是我无法将单击的单元格的任何数据传递给模态。我在这里检查了一些被问到的问题，但其中大多数都适用于 $scope。当它们是组件时，有没有办法做到这一点？任何提示或可能链接到现有帖子或页面？非常感谢。

【问题讨论】：

请出示相关代码。见How to Ask 和minimal reproducible example

标签： angularjs bootstrap-modal

【解决方案1】：

这是来自链接https://angular-ui.github.io/bootstrap/的部分代码

$scope.open = function (size) {

var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});
here $scope.open(data) will be the click function when you click on the particular cell and pass the data  from the cell to the function and in resolve you can send that data to the modal.

【讨论】：

【解决方案2】：

嗯，您可以使用函数将特定单元格绑定到模型中。

例如

<th>
   <!-- item or whatever you use inside the ng-repeat-->
   <button ng-click="selectItem(item)"
           type="button"
           class="btn btn-xs btn-info"
           data-toggle="modal"
           data-target="#myModal"></button>
</th>

在你的控制器中有一个类似的功能。

$scope.selectItem= function (item) {
        $scope.myItemModal= item;
};

最后在您的模态中，您可以将其用作普通的$scope 变量

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        {{myItemModal}}
        </div>
    </div>
</div>

【讨论】：