Question

我无法在popover中获取iframe，以便为该行中的每个地址显示每行的地图。

我的网格：

<div class="form-group col-xs-12">
                        <div ui-grid="gridOptions" class="grid" ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
                    </div>

网格配置：

$scope.gridOptions = {
            enableSorting: true,
            enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
            enableColumnResizing: true,
            columnDefs: $scope.columns,
            enableRowHeaderSelection: false,
            multiSelect: false,
            rowHeight: 40,
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
            }
        };

无工作栏：

{
                name: 'Map',
                width: 55,
                cellClass: 'grid-align-center',
                headerCellClass: 'grid-align-center grid-header-text',
                cellTemplate: '<a style="margin-right: 3px; color: #006699; cursor: pointer;" class="material-icons place" ' +
                    'popover-trigger="&#39;outsideClick&#39;" popover-placement="bottom" popover-append-to-body="true"' +
                    'uib-popover-html="&#39;<div style=&quot;height: 300px; width: 300px; position: relative;&quot;>' +
                    '<iframe height=&quot;100%&quot; width=&quot;100%&quot; frameborder=&quot;0&quot; ng-src=&quot;{{ sce.trustAsResourceUrl(row.entity.mapUrl) }}&quot; ' +
                    'scrolling=&quot;no&quot;></iframe></div>&#39;"' +
                    '</a>'
            },

行为的屏幕截图：

我也试过

$scope.gridOptions.data.mapUrl = $sce.trustAsResourceUrl($scope.gridOptions.data.mapUrl);

非常感谢任何有助于此工作的帮助！

Answer 1

我简化了你的例子并创建了类似的东西：

// dummy URL for iframe
$scope.cvUrl = 
    'http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc&embedded=true';

  var trusted = {};

   $scope.getPopoverContent = function(url) {
     var content = '<iframe src="' + url + '"></iframe>';
    return  trusted[ content] || (trusted[content] = $sce.trustAsHtml(content)); 
  }

ui-grid模板的外观如下：

  <div class="ui-grid-cell-contents">
    <a popover-placement="right" 
    uib-popover-html="grid.appScope.getPopoverContent(grid.appScope.cvUrl)"
    href="" >Popover</a>
  </div>

这是 working Plunker Demo

希望它会给你正确的方向

如何在ui网格中打开地图popover？

1 个答案: