Question

有没有办法绑定自定义验证。我想在ng-keydown上绑定一个方法，根据我的规则集来检查输入。怎么做呢。我尝试在ng-change上调用$ scope函数，但是没有用。

我试过这个ng-change="grid.appScope.checkValidaton($event,MODEL_COL_FIE‌LD,true,true)。调用scope函数但是参数未定义。如何传递$ event和ng-model。

这是我的专栏：

{ name: "group", editableCellTemplate:
                "<div><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  ng-change=\"grid.appScope.checkValidaton($event,MODEL_COL_FIELD,true,true)\"></div>", displayName: "Group", enableCellEdit: true, showSortMenu: false, cellTooltip: true
                },

我的参考来自：http://plnkr.co/edit/4Pvc4UYKSf71pIC2XrpY?p=preview

Answer 1

经过一段时间在互联网上搜索并阅读ui-grid事件后，我编写了一个指令，使用scope实体和ui-grid事件在点击单元格时应用验证。

基本技巧是使用自定义可编辑模板并在其字段上应用验证。

以下是代码，也可以在我的存储库here

中找到

(function(module){

    module.directive('gridValidation', gridValidationFn);

    gridValidationFn.$inject = ['uiGridEditConstants'];

    function gridValidationFn(uiGridEditConstants) {
        var directive = {
            restrict: 'A',
            template: '<div><input type="text" ng-model="txtValue"  ng-change="changeTxt(txtValue)"/></div>',
            scope: true,
            link: gridValidationLinkFn
        };

        return directive;

        function gridValidationLinkFn(scope, elm, attr) {

            var oldTxt = scope.row.entity[scope.col.field];
            scope.limit = attr.limit;
            scope.txtValue = oldTxt;

            function windowClickListener(ev) {
                if (ev.target.nodeName !== "INPUT")
                    scope.editDone();
            }

            scope.changeTxt = function (val) {
                if (attr.words) {
                    if (scope.txtValue && scope.txtValue.match(/\S+/g) && scope.txtValue.match(/\S+/g).length > Number(scope.limit)) {
                        scope.txtValue = scope.txtValue.split(/\s+/, Number(scope.limit)).join(" ");
                        scope.row.entity[scope.col.field] = scope.txtValue.split(/\s+/, Number(scope.limit)).join(" ");
                    }
                    else
                        scope.row.entity[scope.col.field] = scope.txtValue;
                }
                else {
                    if (scope.txtValue && scope.txtValue.length > Number(scope.limit)) {
                        scope.txtValue = scope.txtValue.slice(0, Number(scope.limit));
                        scope.row.entity[scope.col.field] = scope.txtValue;
                    }
                    else
                        scope.row.entity[scope.col.field] = scope.txtValue;
                }
            };

            scope.editDone = function () {
                scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
            };

            scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () {
                angular.element(window).on('click', windowClickListener);
            });

            scope.$on('$destroy', function () {
                angular.element(window).off('click', windowClickListener);
            });
        }

    }
}(angular.module("ModuleName")));

对我来说效果很好。希望它可以帮助别人

如何在ui-grid单元模板上应用自定义验证

1 个答案: