如何在 ui 网格中打开地图弹出框？答案

【问题标题】：How can I open a map popover inside ui grid?如何在 ui 网格中打开地图弹出框？
【发布时间】：2017-10-19 16:03:56
【问题描述】：

我无法在弹出框内获取 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);

任何帮助使它工作将不胜感激！

【问题讨论】：

标签： angularjs iframe angular-ui-bootstrap angular-ui-grid

【解决方案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

希望它能给你正确的方向

【讨论】：

成功了，谢谢！我有点困惑为什么将它包装在 JSON 对象中有效，但直接返回受信任的 HTML 无效（例如 return $sce.trustAsHtml(content); 无效），但这既不是这里也不是那里。