AngularJS+Bootstrap弹窗问题：点击图片需显示对应专属多边形

这个问题其实很典型——你现在应该是把所有弹窗的内容都绑定到了同一个全局变量上，不管点击哪张图，弹窗都会读取这个变量的值，自然就显示一样的内容了。要让每张图对应专属的弹窗内容，我们可以通过给每个图片项绑定独立的数据，并在点击时把当前项的数据传递给弹窗来解决。

第一步：整理你的数据结构 #

首先在AngularJS控制器里，把每张图片的专属信息（缩略图、弹窗显示的图片、多边形数据）整理成一个数组，这样方便后续循环渲染和数据绑定：

app.controller('YourController', function($scope) {
  // 每个元素对应一张图片的专属数据
  $scope.imageItems = [
    {
      id: 1,
      thumbImage: 'path/to/thumb1.jpg', // 点击的缩略图
      popupImage: 'path/to/full1.jpg', // 弹窗里显示的图片
      polygonData: [ {x: 10, y: 20}, {x: 30, y: 40}, ... ] // 专属多边形数据
    },
    {
      id: 2,
      thumbImage: 'path/to/thumb2.jpg',
      popupImage: 'path/to/full2.jpg',
      polygonData: [ {x: 50, y: 60}, {x: 70, y: 80}, ... ]
    }
    // 更多图片项...
  ];

  // 用来存储当前弹窗要显示的图片数据
  $scope.currentPopupData = {};

  // 点击图片时的方法，传入当前项的数据
  $scope.openPopup = function(item) {
    $scope.currentPopupData = item;
    // 这里触发Bootstrap弹窗显示，比如用$('#myModal').modal('show')
  };
});

第二步：修改HTML模板，循环渲染并绑定数据 #

然后在HTML里用ng-repeat渲染所有图片，点击时调用openPopup方法并传入当前项，弹窗里的内容绑定到currentPopupData：

<!-- 循环渲染所有缩略图 -->
<div ng-repeat="item in imageItems" class="image-item">
  <img ng-src="{{item.thumbImage}}" ng-click="openPopup(item)" alt="图片{{item.id}}" />
</div>

<!-- Bootstrap弹窗模板 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- 弹窗里的图片 -->
        <img ng-src="{{currentPopupData.popupImage}}" alt="弹窗图片" />
        <!-- 这里渲染多边形，根据你的polygonData来生成，比如用SVG -->
        <svg width="500" height="500">
          <polygon 
            ng-attr-points="{{currentPopupData.polygonData.map(p => `${p.x},${p.y}`).join(' ')}}"
            fill="rgba(255,0,0,0.3)"
          />
        </svg>
      </div>
    </div>
  </div>
</div>

关键说明 #

• 我们通过ng-repeat遍历所有图片项，每个图片点击时把自己的专属数据传给currentPopupData，这样弹窗就会显示当前点击项的内容。
• 如果你的多边形是用其他方式渲染的（比如第三方库），只需要把currentPopupData.polygonData传给对应的渲染方法即可，核心就是让弹窗读取当前点击项的专属数据，而不是共用的全局数据。

如果你的原来代码里是给每个图片写了单独的弹窗，那更建议改成复用一个弹窗的方式，既减少冗余代码，也能避免数据绑定错误。

内容的提问来源于stack exchange，提问作者sani