我在玩新的Angular UI网格，在将自定义下拉列表注入网格单元格时遇到了问题。内置的下拉菜单功能不适用于我的项目，因为您只能为SELECT标记设置样式。我想使用这个时髦的多选下拉列表，但看起来ui网格的魔力要么是阻止我的打开下拉列表事件传播，要么是我的下拉列表无法即时初始化。
这是我的示例代码：
HTML:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>`
app.js:
var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'angularjs-dropdown-multiselect']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var grid;
$scope.msData = [ {id: 1, label: "David"}, {id: 2, label: "John"}, {id: 3, label: "Danny"}];
$scope.msSettings = {enableSearch: true, smartButtonMaxItems: 3, smartButtonTextConverter: function(itemText, originalItem) {return originalItem.id;}};
$scope.gridOptions = {
enableCellEditOnFocus: true,
columnDefs: [
{ field: 'name'}
,{ name: 'friends', displayName: 'Friends', editableCellTemplate: 'temp.html', width: '250', editDropdownValueLabel: 'friends'}
],
onRegisterApi: function( gridApi ) {
grid = gridApi.grid;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
temp.html(编辑单元模板)：
<div ng-dropdown-multiselect="" options="msData" selected-model="MODEL_COL_FIELD" extra-settings="msSettings" checkboxes="true"></div>
双击"好友"单元格时，会显示选择下拉按钮，但单击它不会展开下拉按钮。
这是一个plunker
我已经尝试过几种其他的下拉方式，但都有相同的问题，基本元素(按钮、链接等)出现了，但下拉列表没有展开。
有人对如何阻止ui网格拦截我的点击事件有什么建议吗(如果这确实是导致问题的原因)？或者你们这些优秀的人以前在ui网格中实现过类似的自定义下拉菜单吗？
一般来说，在UI网格中使用基于html的小部件的常见问题是，单独的单元格以及网格本身都被设置为防止其内容溢出。这可以让所有东西都保持正常大小，但当你想显示额外的内容(如自定义下拉列表)时，就会受到阻碍。
使用UI Select可以解决这一问题，因为它有一个append-to-body属性，可以将元素绝对定位在正确的位置，但它将被附加到文档正文中，从而消除了溢出问题。
我在这里写了一篇关于做这件事的确切方法的文章：http://brianhann.com/ui-grid-and-dropdowns/。可能有一些方法可以对其他小部件做同样的事情，但这可能需要一些额外的编码，甚至可能需要分叉。
最可能的问题是您需要创建一个指令，而不仅仅是一个模板。请参阅此处的讨论：http://ui-grid.info/docs/#/tutorial/201_editable关于自定义编辑器。
要了解它可能是什么样子，请查看edit.js文件和底部指令：https://github.com/angular-ui/ng-grid/blob/master/src/features/edit/js/gridEdit.js
我最近添加了最后一条关于文件选择器的指令。你需要这样的东西(或者可能更像uiGridEditDropdown的指令，我在文件后面添加了它)。