如何在 uib-popover 中显示动态 HTML 注入 uib-grid

Question

我想在 uib-popover 中显示动态生成的 HTML，当在 uib-grid 的每一列 header 中单击 <i> 时显示. ng指令和变量也需要激活，例如ng-click、$scope等

我尝试在 uib-grid 的每个列定义中使用 headerCellTemplate 来显示 <i> 标签，并且我将动态生成的 HtML 传递给每个列定义, 这样我就可以用 col.displayName.popoverTemplate 在 headerCellTemplate 中得到它，它工作正常。但是我无法将任何变量传递给 popover 使用 $scope，并且 ng-click 根本不起作用。有人说我需要编译 HTML 或使用 uib-popover-template，我如何将参数传递给 uib-popover-html 或者还有其他方法。

谢谢！

列定义

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

列 header 模板：

      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，然后 uib-popover-template 属性可以找到它并且 ng 工作正常。

如何在 uib-popover 中显示动态 HTML 注入 uib-grid

How to display dynamic HTML in uib-popover inject into uib-grid

javascript

angularjs

uib

angular-ui-bootstrap