画像をブートストラップモーダルに動的に追加するAngular ng-repeatからクリックしてください

Question

私は、ユーザがその特定の画像をクリックしてブートストラップモーダルに拡大できるようにしたい写真のページを持っています。どのように私は動的にclick..myのHTMLにモーダルに各特定の画像を追加することができ、次のようになります

<div class="container fishing-picture-container"> 
    <div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer"> 
    <div class="col-md-4" ng-if="fishingPictures[$index].name"> 
     <figure> 
      <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" /> 
     </figure> 
    </div> 
    <div class="col-md-4" ng-if="fishingPictures[$index + 1].name"> 
     <figure> 
      <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" /> 
     </figure> 
    </div> 
    <div class="col-md-4" ng-if="fishingPictures[$index + 2].name"> 
     <figure> 
      <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" /> 
     </figure> 
    </div> 
    </div> 
</div> 


<!-- Creates the bootstrap modal where the image will appear --> 
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <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" id="myModalLabel">Image preview</h4> 
     </div> 
    <div class="modal-body"> 
     <img src="" id="imagepreview"> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</div> 

私はイメージの名前に渡す関数を呼び出すとだろうと考えました。それをモーダルに追加しますが、動作しないようです。それはそれについて行くための最善の方法のようですか？理想的には、私はあなたがこのリンクで画像をクリックすると、それがどのように見えるかに似た外観を得ることを好むだろう：

http://www.w3schools.com/howto/howto_css_modal_images.asp

Answer 1

角度スクリプト

$scope.showModal = function (imageName) {   
      angular.element("#imagemodal").modal("show"); 
      $scope.ImageName = "Path here...."+ imageName; 
     } 

Htmlの

<div class="modal-body"> 
     <img ng-src="{{ImageName}}" id="imagepreview"> 
</div> 

------------ --------------------------または----------------------- --------------

Htmlの

<figure> 
      <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/> 
</figure> 


<div class="modal-body"> 
     <img ng-src="{{ImageName}}" id="imagepreview"> 
</div> 

角度スクリプト

$("#imagemodal").on("shown.bs.modal", function (event) { 

    var imgName= $(event.relatedTarget).data('imgname'); 
    $scope.ImageName = "Path here...."+ imageName; 
});