Как отобразить динамический HTML в UIB-поповере, внедрить в UIB-сетку

Question

Я хочу отобразить динамически сгенерированный HTML в UIB-popover, и он отображается, когда <i> щелкается в заголовке каждого столбца uib-сетки. Директивы и переменные 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

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