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

Question

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

要使用的数据是通过对来 self 的 Controller 的对象数组的 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(或任何合适的。)