Angular：加载加载了单击元素数据的引导模式答案

【问题标题】：Angular: Load bootstrap modal loaded with data of the element clickedAngular：加载加载了单击元素数据的引导模式
【发布时间】：2013-04-12 22:26:04
【问题描述】：

我有一个从服务中显示的项目列表，我使用 ng-repeat 来显示我的数据。对于这些项目中的任何一个，我希望能够打开一个引导模式，其中填充了所单击项目的数据（在该项目的范围内）。

myApp.directive('openmodal', function(){
    return {
        link: function(scope, element, attrs){
            element.on('click', function(){ 
                $(element.attr('href')).modal();
            });
        }
    }
});

我的代码的jsfiddle.net在这里http://jsfiddle.net/echTw/2/

目前，我的引导模式将仅显示来自我的 JSON 的第一个对象的数据。如何在单击的元素范围内运行引导模式并加载数据（Angular 是否有类似 this.$ 的东西）？

编辑

不，我没有使用角带。我尝试使用指令并按照建议隔离范围，但灯箱仍将仅显示来自第一个元素的数据（不知道为什么）。

所以我更新了我的代码以使用 ng-click，一个控制器，并且还在模态中添加了动态 ID 来解决这个问题：

HTML

<a ng-click="show(task.id)">Show lightbox</a>

角度

function TaskController($scope, Data){
    $scope.data = Data;

    $scope.show = function(e){
        $('#myModal_'+e).modal();
        console.log('#myModal_'+e);
    }
}

【问题讨论】：

标签： jquery twitter-bootstrap angularjs scope bootstrap-modal

【解决方案1】：

好的，所以我认为这里缺少一些步骤。您的 Jsfiddle 根本不起作用，因此很难真正理解您的问题是什么。因此，我将解决我认为您缺少的所有问题。

首先，您使用的是angular-strap 吗？它为 Bootstrap 组件定义了大多数指令，并与“Angular Way”更好地集成。

然后，您可以使用您的范围来代替使用 href（以角度形式，可以使用 $routeProvider 管理），例如，通过将元素的 id 传递给它来选择要显示的正确项目

<a href="#myModal" class="btn" openmodal>Open modal</a>

可以变成类似的东西

 <a ng-click="show(item.id)">Show this item</a>

show 是控制器中定义的函数，它触发模态并选择要显示的正确项目。

然后如果你想将它用作指令，你可以在你的指令中注入这个元素并显示它。你可能需要

return {
    scope: true, // Isolated scope -> not shared between all components
    link: function(scope, element, attrs){ 
       // ...
    },
};

尝试类似的方法，如果您有任何问题，请不要犹豫！

【讨论】：

感谢您的回复。请参阅我的编辑。

【解决方案2】：

你可以试试这个最简单的工作代码

HTML 代码：

<button type='button' class='btn btn-primary btn-sm btnmargin' 
        data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'>more info
</button>

内部控制器代码将是：

$scope.customerinfo=[];
$scope.moreinfo= function(customer){
  $scope.customerinfo= customer;
};

HTML Bootstrap 模型代码：

<!-- Modal start -->
<div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
     aria-labelledby='myModalLabel' aria-hidden='true'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal'>
          <span aria-hidden='true'>&times;</span>
          <span class='sr-only'>Close</span></button>
        <h4 class='modal-title text-danger' 
            id='myModalLabel'>customer info</h4>
      </div>
      <div class='modal-body'>
        {{customerinfo.firstName}}
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' 
                data-dismiss='modal'>close</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal end -->

【讨论】：