Comment puis-je ouvrir une carte popover à l'intérieur de la grille ui?

Question

Je n'arrive pas à obtenir une iframe dans un survol pour afficher une carte par ligne pour chaque adresse de cette ligne.

Ma grille:

<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> 

config Grille:

$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; 
      } 
     }; 

La colonne aucun travail:

{ 
       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>' 
      }, 

Une capture d'écran du comportement:

J'ai aussi essayé

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

Toute aide pour que cela fonctionne serait grandement appréciée!

Answer 1

I simplifié votre exemple et créé quelque chose de similaire:

// 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)); 
    } 

Où modèle ui-grid ressemblera:

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

est ici working Plunker Demo

Espérons qu'il vous donnera la bonne direction