Angular ui-grid 自定义过滤器不能用作 headerCellTemplate

Question

我想在 ng-grid 3.0 中使用 headerCellTemplate 选项添加基于 AngularJs MultiSelect 的自定义过滤器。请查看plunker。

  <div ng-controller="mainCtrl">
  <multi-select
    input-model="names"
    button-label="name"
    item-label="name"
    tick-property="ticked"
    max-labels="1"
    helper-elements=""
    on-item-click="fClick( data )"
    default-label="None"
    class="level-multi-select">
  </multi-select>

一切看起来都很好，只要它位于网格之外。当它在里面时，我遇到了两个问题：

1. 过滤后数据似乎被过滤了，但显示不正确。

2. 布局已损坏。在不覆盖 css 的情况下，下拉菜单隐藏在 ui-cells 后面，并在单击后重新定位。在应用来自here（当前版本的 plunker）的建议后，下拉菜单正在更改顶部标题的高度。我更喜欢与网格菜单相同的显示（单击右上角的图标后可见）。

Answer 1

感谢 GitHub 上的人的帮助，我设法找到了两个解决方案：

一个是像我上面的例子一样覆盖customHeaderTemplate。 css 必须进行不同的修改。我还纠正了我在代码中的错误。 html 中不应有对 mainCtrl 的引用。我使用第二个控制器进行多选并修改代码以使用 $scope.grid.appScope。我认为使用广播会是更清洁的解决方案，但至少代码很短

http://plnkr.co/edit/lcoTtIdg723yHXtwsKjl?p=preview

  $scope.grid.appScope.myData = _.filter( $scope.grid.appScope.originalData, function (item) {

    return _.contains(selectedNames, item.name) ;
  });

第二个是基于新的开发，它还不是 ui-grid 的一部分。 您可以关注问题#2918 以查看详细信息。 GitHub 页面上还有第二个 plunke 的链接