0

我想在uib-popover中显示一个动态生成的HTML，当<i>在uib-grid的每个列标题中单击a时会显示它。ng 指令和变量也需要处于活动状态，例如 ng-click、$scope 等。

我尝试使用headerCellTemplateuib-grid 的每个列定义中的 来显示<i>标签，并将动态生成的 HtML 传递给每个列定义，以便我可以在headerCellTemplatewith中获取它col.displayName.popoverTemplate，它工作正常。但是我不能将任何变量传递给 popover use $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)
});

列标题模板：

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

1 回答 1

0

我解决了我的问题 :) 生成弹出框模板并将其放入带有 Id 的 $compileCache 中，然后 uib-popover-template 属性可以找到它并且 ng 工作正常。

于 2016-06-15T07:09:15.363 回答