角度ui-grid中的自定义编辑器

Question

我正在尝试为ui-grid编写自己的单元格编辑器。有10种颜色：0 =黑色，1 =白色，2 =灰色，依此类推。我将单元格中的数值显示为小的彩色div。在编辑时，我希望有一个带有十个小颜色div的div，它会在点击时更改ngModel值。

我有两个问题：

1. 如何将所选颜色的值恢复为ui-grid？
2. 如何在包含彩色div的div上模糊事件？

示例：



有人能给我一个暗示吗？

以下是我的文件：

gridController.js：

$scope.gridOptions = {
    ...
    editableCellTemplate: `template/cellEdit${c.cellType}`
}

cellEditColor.jade：

form(name="inputForm")
    edit-color(style="position:absolute;",ng-class="'colt' + col.uid",ng-model="MODEL_COL_FIELD")

editColor.jade

div(style="tabindex=-1;background-color:#def;")
    .colorView(ng-click="selectColor(c.id)",ng-repeat="c in colors",style="background-color:{{c.v}}",ng-class="{'selected': c.id == selected }")

editColor.js

sim.directive('editColor', [function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function (scope, elem, attr) {
            scope.selected = scope.ngModel;

            scope.colors = [
                { id: 0, v: '#000' },
                { id: 1, v: '#fff' },
                { id: 2, v: '#aaa' },
                { id: 3, v: '#840' },
                { id: 4, v: '#fc8' },
                { id: 5, v: '#f00' },
                { id: 6, v: '#ff0' },
                { id: 7, v: '#0f0' },
                { id: 8, v: '#00f' },
                { id: 9, v: '#f0f' }
            ];

            scope.$on('uiGridEventStartCellEdit', function () {
                elem.focus();
            });

            elem.bind('blur', function () {
                // this never occurs
                scope.$emit('uiGridEventEndCellEdit');
            });

            elem.bind('mousedown', function (evt) {
                evt.stopPropagation();
            });

            scope.selectColor = function (c) {
                // update grid with c
                scope.$emit('uiGridEventEndCellEdit');
            }

        },
        templateUrl: 'sim/template/editColor'
    };
}]);