javascript - Angular $modal 范围 - 将对象传递给 $modal

Question

我正在尝试将 Angular 的 Bootstrap 模式传递给在 Angular Masonry Gallery 中单击的图像的 URL。我所拥有的与文档中的演示非常接近，仅做了一些更改。我知道这完全是我自己对范围的理解的问题。

我的模态 HTML:

    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>

在我的 Controller 中:

angular.module('testApp').controller('GalleryCtrl', function ($scope, $modal, $log) {
  $scope.animationsEnabled = true;
  $scope.items = ['item1', 'item2', 'item3'];
  // Temporary Generation of images to replace with about us images
  function genBrick() {
      var height = ~~(Math.random() * 500) + 100;
      var id = ~~(Math.random() * 10000);
      return {
        src: 'http://placehold.it/' + width + 'x' + height + '?' + id
      };
  };
  this.bricks = [
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick()
  ];
  this.showImage = function(item){
    alert(item.src); // gives me exactly what im trying to pass to the modal
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'views/modal.html',
      scope: $scope,
      controller: 'GalleryCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

  }
});

最后为了清楚起见，这是我的砌体代码

<div masonry>
    <div class="masonry-brick" ng-repeat="brick in gallery.bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick" ng-click="gallery.showImage(brick)">
    </div>
</div>

现在，这可以很好地将 li 标签中的 items 对象 3 值返回到模态，就像原始示例一样。 id 真正喜欢传递到模型中的是 (item.src)，但无论我更改什么，它似乎都永远不会传递到模型中以便我可以显示它。

Answer 1

好吧，我觉得这很奇怪，但尝试使用 item.src.toString(); 由于某种原因它不喜欢返回整数。