Question

我有这个部分：

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.img}}</td>

<script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3 dir="rtl" align="center">screenshot</h3>
                    </div>
                    <form ng-submit="submit()">
                      <div class="modal-body">
                        <img ng-src="{{data.img}}">
                      </div>
                      <div class="modal-footer">
                          <button class="btn btn-warning" ng-click="cancel()">close</button>
                      </div>
                    </form>
                </script>
                    <button ng-click="open()">open</button>

实际上，它没有将值从{{data.img}}传递给打开模态窗口的javascript。任何想法？

谢谢！

Answer 1

我看到你已经标记了bootstrap-modal所以我假设你正在使用它。

打开模态时，需要使用resolve键将变量传递给模态。模态的演示应该有。

var modalInstance = $modal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: { // here
    items: function () {
      return $scope.items;
    }
  }
});

在模态控制器上，您将变量作为服务

controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)

然后将其分配给范围变量，以便您的模态模板可以看到它

$scope.items = items;

在评论中提供网站：

var ModalDemoCtrl = function ($scope, $modal) {
    $scope.open = function () {

    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data) {
            $scope.data = data;
            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            }
        }
    });
};

Answer 2

我认为要正确解决这个问题，您需要将列引用传递给模态，否则我们无法确定要显示的图像。

$scope.open = function (imageKey) {
    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data, imageKey) {
            $scope.data='';
            $scope.data = data;

            $scope.getImage = function () {
                return $scope.data[imageKey];
            }

            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            },
            imageKey: function() {
                return imageKey;
            }
        }
    });
}

在模板上（传入您要使用的密钥）：

<button ng-click="open('dioPlusImage')">פתח צילום מסך</button>

关于模态模板：

<img ng-src="{{getImage()}}>"

是否可以将值从ng.repeat传递给javascript函数？

2 个答案: