如何在UI网格中打开地图弹出窗口？

Question

我无法在弹出窗口中获取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网格模板将是这样的：

<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

希望它能给你正确的方向