uiグリッドセルテンプレートにカスタム検証を適用する方法

Question

カスタム検証をバインドする方法はありますか？私は、ルールのセットに対して入力をチェックするために、ng-keydownのメソッドをバインドしたいと思います。どうやってそれを行うことができますか？私はng-changeで$ scope関数を呼び出そうとしましたが、それはうまくいきませんでした。

私はこれを試しましたng-change="grid.appScope.checkValidaton($event,MODEL_COL_FIE‌​LD,true,true)。スコープ関数が呼び出されますが、引数は未定義です。 $ 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 
       }, 

私はから私の参照を持っていた：インターネット上で検索すると、UIグリッドイベントについて読み取るしばらくして、私が使用するディレクティブをコード化http://plnkr.co/edit/4Pvc4UYKSf71pIC2XrpY?p=preview

Answer 1

scopeエンティティおよびuiグリッドイベントを使用して、セルのクリックに対して検証を適用します。

基本的なやり方は、カスタム編集可能なテンプレートを使用して、そのフィールドで検証を適用することでした。ここで

がコードである、また、それが私のためにうまく動作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"))); 

私のリポジトリで見つけることができます。それが他の人に役立つことを願っています