0

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

2 回答 2

0

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

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

然后，您可以使用范围来例如通过将元素的 id 传递给它来选择要显示的正确项目，而不是使用 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){ 
       // ...
    },
};

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

于 2013-04-19T15:19:55.373 回答
-1

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

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引导模型代码：

<!-- 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 -->
于 2017-08-19T06:41:34.457 回答