uib-popover注入到uib-网格中如何显示动态HTML

Question

我想在uib中显示一个动态生成的HTML，当在uib-网格的每个列标题中单击一个<i>时，它就会显示出来。ng指令和变量也需要是活动的，例如ng-click、$scope等.

我尝试在uib-网格的每个列定义中使用headerCellTemplate来显示<i>标记，并将一个动态生成的HtML传递给每个列定义，这样我就可以使用col.displayName.popoverTemplate在headerCellTemplate中获得它，它工作得很好。但是我不能将任何变量传递给popover使用$scope，而且ng-click根本不工作。有人说我需要编译HTML或使用uib-popover-template，我如何将params传递给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模板并使用Id将其放入$compileCache，然后属性可以找到它，ng可以正常工作。