2016-09-28 5 views
0

Есть ли способ привязки пользовательской проверки. Я хотел бы привязать метод к ng-keydown, чтобы проверить ввод на мой набор правил. Как это можно сделать. Я пытаюсь вызвать функцию $ scope на ng-change, и это не сработало.Как я могу применить свою пользовательскую проверку на шаблоне ячейки ui-grid

Я пробовал это ng-change="grid.appScope.checkValidaton($event,MODEL_COL_FIE‌​LD,true,true). Функция scope вызывается, но аргументы не определены. Как я могу передать $ event и ng-модель.

И это моя колонка:

{ 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

+0

Будет ли это работать для вас, если проверка проверки произошла в ячейке, теряющей фокус, или это необходимо для каждого нажатия клавиши? –

+0

он должен быть в режиме реального времени нажатием клавиши ... В основном я должен предотвратить ввод. Иначе я мог бы использовать '.on.afterEdit' –

+0

ОК. У меня нет решения для этого случая. Надеюсь, что кто-то еще это сделает. –

ответ

0

Через некоторое время поиска по Интернету и читать о щ-сетевых событий, я закодированы директиву Используйте 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"))); 

Это хорошо работает для меня. Надеюсь, это поможет кому-то еще

 Смежные вопросы

  • Нет связанных вопросов^_^