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（或任何适当的。）

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

1 个答案: