使用 ng-repeat 在指令中显示数据

Question

我目前正在尝试理解 Angular 指令。 现在我已经制定了一个指令，我正在使用这个指令来在单击按钮时显示一个模式。要显示的模态在实例化时通过注入获取其数据。

要使用的数据是通过 ng-repeat 在我的控制器中的一组对象上找到的。我试图明确显示每个循环中的模态，当我这样做时，数据就像预期的那样。但是，当我尝试通过单击按钮打开模式时，它会显示来自第一个对象的数据，而不管按钮在 ng-repeat 中的索引是什么。

我的指令：

angular.module('myAppRename.directives', []).
directive('myModal', function () {
return {
  restrict: 'AE',
  scope: {
    inv: '='
  },

  template:

      '<div class="modal fade" id="myModal" role="dialog">' +
      '<div class="modal-dialog">' +
      '<div class="modal-content col-md-12">' +
      '<h1>Redigering af bilaget : {{inv.title}}</h1>' +
  '<form role="form">' +
      '<div class="form-group">' +
      '<label for="title">Title:</label>' +
  '<input placeholder="{{inv.title}}" type="text" class="form-control" id="title">' +
      '</div>' +
      '<div class="form-group">' +
      '<label for="projekt">Projekt:</label>' +
  '<input placeholder="{{inv.project}}" type="text" class="form-control" id="projekt">' +
      '</div>' +
      '<div class="form-group">' +
      '<label for="ordre">Ordre:</label>' +
  '<input placeholder="{{inv.order}}" type="text" class="form-control" id="ordre">' +
      '</div>' +
      '<div class="form-group">' +
      '<label for="sendernote">Senders Noteringer:</label>'+
  '<input placeholder="{{inv.notes}}" type="text" class="form-control" id="sendernote">' +
      '</div>' +
      '<div class="form-group">' +
      '<label for="dinenoter">Dine Noteringer:</label>' +
      '<input placeholder="{{inv.adminComment}}" type="text" class="form-control" id="dinenoter">' +
      '</div>' +
      '<button ng-click="editAnnex()>Send Redigering</button>' +
  '</form>'+
  '</div>'+
  '</div>'+
  '</div>'

 };
 }
 );

在 ng-repeat 中使用指令：

    <div class="table-responsive">
    <table class="table table-striped table-hover span-8" id="myTable">


        <tr ng-repeat="inv in inventory | filter: searchKeyword">

            <td>
                <my-modal inv="inv"></my-modal>

                <div class="col-md-2">
                    <button class="btn btn-success btn-block"
                            ng-click="acceptAnnex(inv.id,inv.title)">Accepter
                    </button>
                    <button class="btn btn-danger btn-block" ng-click="denyAnnex(inv.id,inv.title)">Slet</button>
                    <button class="btn btn-primary btn-block" ng-click="addComment(inv.id)"> Tilføj kommentar
                    </button>
                    <button type="button" class="btn btn-default btn-block" data-toggle="modal"
                            data-target="#myModal"> Rediger</button>

                </div>
                <div class="col-md-6">
                    <img class="img-responsive center-block img-rounded img-thumbnail" ng-src="{{inv.image}}" alt=""/>
                </div>
                <div class="col-md-4">
                    <h4> Title : {{inv.title}}</h4>
                    <h4>Sender : {{inv.sender}}</h4>
                    <h4>Projekt : {{inv.project}}</h4>
                    <h4>Ordre : {{inv.order}}</h4>
                    <h4>Senders Noteringer : </h4>
                    <p class="thumbnail">{{inv.notes}}</p>
                    <h4>Din kommentar : </h4>
                    <p class="thumbnail">{{inv.adminComment}}</p>
                </div>

            </td>
        </tr>

    </table>
</div>

无法真正理解为什么会发生这种情况，因此非常感谢任何建议或正确方向的提示！

Answer 1

您使用#myModal 作为页面上每个模式的 ID。当您通过#myModal 引用模式时，您不会得到您想要的模式，因为 id 应该是唯一的。

你需要生成：

id=myModal1, id=myModal2, ...（页面上每个模式的唯一 id）在您的迭代器中，然后您的目标应该是

#myModal1（或任何合适的。）