AngularJS ui-grid嵌套列菜单

Question

ui-grid允许列菜单，但它们是一个在另一个上面添加的。我需要嵌套菜单项（如http://www.bootply.com/86684），但我还需要指定自定义控件，如嵌套菜单项上的复选框和单选按钮。

到目前为止，我花了几个小时浏览文档，在线搜索和阅读ui-grid代码但未能提出解决方案。寻找关于我如何能够实现这一目标的一些指示或指导。

ui-grid中列的菜单项的示例配置：

$scope.gridOptions.columnDefs = [
    field: 'Column01',
    menuItems: [
        {
            title: 'Outer Scope Alert',
            icon: 'ui-grid-icon-info-circled',
            shown: function() { return true; },
            active: function() { return true; },
            context: $scope,
            action: function($event) {
                this.context.blargh();
            }
        },
        {
            title: 'Grid ID',
            action: function() {
                alert('Grid ID: ' + this.grid.id);
            }
        }
    ]
];

有没有办法完全覆盖列菜单模板，以便我可以指定嵌套的菜单项数组？另请注意，我想为各个菜单项指定模板。

$scope.gridOptions.columnDefs = [
    field: 'Column01',
    menuItems: [
        {
            title: 'Menu A',
            icon: 'ui-grid-icon-info-circled',
            context: $scope,
            menuItems: [
                {
                    title: 'Menu A1',
                    icon: 'ui-grid-icon-info-circled',
                    template: '<li>' +
                    '    <div class="checkbox">' +
                    '        <label>' +
                    '          <input type="checkbox"> Checkbox 01' +
                    '       </label>' +
                    '    </div>' +
                    '    <div class="checkbox">' +
                    '        <label>' +
                    '          <input type="checkbox"> Checkbox 02' +
                    '       </label>' +
                    '    </div>' +
                    '</li>',
                    action: function($event) {
                        this.context.blarghA1();
                    }
                },
                {
                    title: 'Menu A2',
                    icon: 'ui-grid-icon-info-circled',
                    action: function($event) {
                        this.context.blarghA2();
                    }
                },
                {
                    title: 'Menu A3',
                    icon: 'ui-grid-icon-info-circled',
                    action: function($event) {
                        this.context.blarghA3();
                    }
                }
            ]
        },
        {
            title: 'Menu B',
            action: function() {
                alert('Grid ID: ' + this.grid.id);
            }
        }
    ]
];

谢谢！