Как отобразить динамический HTML в uib-popover для ввода в uib-сетку

Question

Я хочу отобразить динамически сгенерированный HTML в uib-popover, и это показано, когда в каждом заголовке столбца uib-grid щелкнул <i>. Директивы и переменные ng также должны быть активными, например ng-click, $ scope и т. Д.

Я попытался использовать headerCellTemplate в каждом определении столбца uib-сетки для отображения тега <i> и передал динамический созданный HtML для каждого определения столбца, так что я могу получить его в headerCellTemplate с col.displayName.popoverTemplate, он отлично работает. Но я не могу передать какие-либо переменные в popover, используя $scope, и ng-click вообще не работают. Кто-то сказал, что мне нужно скомпилировать HTML-код или использовать uib-popover-template, как передать параметры uib-popover-html или есть другой способ.

СПАСИБО!

columnDefs

columnDefs.push({ 
    name:'columnViewData._name', 
    displayName:{//use this file to pass params into uib-grid headers 
    displayName:'columnName', 
    popoverTemplate:generatePopoverTemplate(),//template should be shown in popover for this column header 
    customerScope:$scope//current scope, I hope popover can access it 
    }, 
    width:100, 
    enableColumnMenu:false, 
    pinnedLeft:true, 
    headerCellTemplate:generateUIGridHeaderTemplate('name',0) 
}); 

шаблон заголовка колонки:

 var generateUIGridHeaderTemplate = function(columnName,type){ 
      return "\ 
<div role=\"columnheader\" ng-class=\"{ 'sortable': sortable }\" ui-grid-one-bind-aria-labelledby-grid=\"col.uid + '-header-text ' + col.uid + '-sortdir-text'\" aria-sort=\"{{col.sort.direction == asc ? 'ascending' : (col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}\">\ 
    <div style=\"margin-top:0.3em;\">\ 
    <div style=\"display:inline;\" role=\"button\" tabindex=\"0\" class=\"ui-grid-cell-contents ui-grid-header-cell-primary-focus\" col-index=\"renderIndex\" title=\"TOOLTIP\">\ 
    <span class=\"ui-grid-header-cell-label\" ui-grid-one-bind-id-grid=\"col.uid + '-header-text'\">\ 
     {{ col.displayName.displayName CUSTOM_FILTERS }}\ 
    </span> \ 
    <span ui-grid-one-bind-id-grid=\"col.uid + '-sortdir-text'\" ui-grid-visible=\"col.sort.direction\" aria-label=\"{{getSortDirectionAriaLabel()}}\">\ 
     <i ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\" title=\"{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + (col.sort.priority + 1) : null}}\" aria-hidden=\"true\">\ 
     </i> \ 
     <sub ui-grid-visible=\"isSortPriorityVisible()\" class=\"ui-grid-sort-priority-number\">\ 
     {{col.sort.priority + 1}}\ 
     </sub>\ 
    </span>\ 
    </div>\ 
    <i style=\"margin-left:-1em;\" class=\"glyphicon glyphicon-filter\" popover-placement='bottom' uib-popover-html=\"col.displayName.popoverTemplate\" popover-title=\"Filter\" popover-append-to-body=\"true\">\ 
    </i>\ 
<!-- above line is the popover togger shown in the column header-->\ 
    </div>\ 
    <div role=\"button\" tabindex=\"0\" ui-grid-one-bind-id-grid=\"col.uid + '-menu-button'\" class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\" ui-grid-one-bind-aria-label=\"i18n.headerCell.aria.columnMenuButtonLabel\" aria-haspopup=\"true\">\ 
    <i class=\"ui-grid-icon-angle-down\" aria-hidden=\"true\">\ 
     &nbsp;\ 
    </i>\ 
    </div>\ 
    <div ui-grid-filter>\ 
    </div>\ 
</div>"} 

шаблон поповер

var generatePopoverTemplate = function(){ 
    var t = $sce.trustAsHtml('<a class="btn" ng-click="alert(\'asd\')">asd</a>'); 
    $compile(t)($scope); 
    return t; 
} 

Answer 1

Я решил мой вопрос :) Сформировать шаблон поповер и положить его к $ compileCache с идентификатором, тогда свойство uib-popover-template может найти его и ng works хорошо.