Question

我有一个从服务中显示的项目列表，我使用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/

目前我的bootstrap模式只会显示来自我JSON的第一个对象的数据。如何在单击的元素范围内运行bootstrap模式并加载数据（Angular是否有类似的内容。$）？

修改

不，我没有使用棱角带。我尝试使用指令并按照建议隔离范围，但灯箱仍然只显示第一个元素的数据（不确定原因）。

所以我更新了我的代码，使用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);
    }
}

Answer 1

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

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

然后，您可以使用范围来代替使用href（可以使用$routeProvider来管理角色，例如，选择要显示的正确项目，方法是将其显示为元件

<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){ 
       // ...
    },
};

尝试类似的事情，如果您有任何疑问，请不要犹豫！

Answer 2

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

HTML CODE：

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

Angular：加载bootstrap模式，加载了单击元素的数据

2 个答案: