右クリックでuiグリッド選択

Question

行を右クリックしたときにその行を選択できます。

これまでのところ、私は、次の解決策（私はhereからアイデアを持っている）があります。

を私はこのような右クリックディレクティブの作成：

app.directive('rightClick', function($parse) { 
    return function(scope, element, attrs) { 
     var fn = $parse(attrs.rightClick); 
     element.bind('contextmenu', function(event) { 
     scope.$apply(function() { 
      event.preventDefault(); 
       fn(scope, {$event:event}); 
      }); 
     }); 
    }; 
}); 

をそして、私は私のコントローラに機能を追加することができますそれが呼び出されます：属性right-click="rightClick($event)"とディレクティブを追加

$scope.rightClick = function (event) { 
    var scope = angular.element(event.toElement).scope(); 
    if (scope.row.entity !== undefined) { 
     //... select element by calling gridApi 
    } 
}; 

はもちろん必要です。

この解決策の問題点は、角度のデバッグ機能であるelement.scope()に依存し、デバッグ情報が本番環境では無効になっている場合には利用できないことです。

だから私はelement.scope()なしで動作する代替ソリューションを探しています。つまり、「角度デバッグ機能に頼らずに右クリックで要素を選択する方法」です。デバッグ動作をオーバーライドして満足している場合

Answer 1

：

$scope.rightClick = function (event) { 
    var element = angular.element(event.toElement); 

    //get cellId which for the thrid row should something like this 
    //1464688691229-2-uiGrid-0006-cell 
    var id = element[0].parentElement.id; 

    var regex = /(\d+)/g 
    var result = id.match(regex); 
    var rowIndex = parseInt(result[1]); //extract second numeric match 

    $scope.gridApi.selection.selectRowByVisibleIndex(rowIndex);  
}; 

私はあなたがおそらく見るために実験する必要があるでしょうねそのIDがソースデータの可視インデックスまたはインデックスである場合私は確信が持てませんが、実際の例をここに入れました。

http://plnkr.co/edit/b2RKW0hdtFk1ZOLn1XsS?p=preview

Answer 2

あなたが行くことができる：

angular.reloadWithDebugInfo() 

きれいではありませんが、それが働くだろう。

出典：行IDがクリックされたセルを識別するために使用することができ、セル要素のidに保存されているhttps://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Answer 3

また、いくつかのスコープ変数に（マウスカーソルの下の）行を設定するであろう（$ scope.selectRowOnMouseOver下記参照）、いくつかのスコープ方法にNG-マウスオーバー参照して、行テンプレートを定義することができます。次に、あなたの右クリックの方法で選択を設定するには、この変数を使用することができます。

は、行テンプレートを定義します。

 //define row template with ng-mouseover reference to scope method 
    $scope.resultsGrid.rowTemplate = 
     "<div ng-dblclick=\"grid.appScope.doubleClickOnRow(row, $event)\" ng-repeat=\"(colRenderIndex, col) in" + 
     " colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell':" + 
     " col.isRowHeader }\" ng-mouseover=\"grid.appScope.selectRowOnMouseOver(row)\" ui-grid-cell></div>"; 

は、スコープ変数にカーソルの下の行を設定（またはすぐこの行の選択を設定）するメソッドを定義します：あなたの右クリックの方法で

$scope.selectRowOnMouseOver = function (row) { 
     $scope.rowUnderMouse = row; 
     //you can also select row right here or in other methods using above variable 
     $scope.gridApi.selection.clearSelectedRows(); 
     row.setSelected(true); 
    }; 

使用スコープ変数：

$scope.rightClick = function (event) { 
     var row = $scope.rowUnderMouse; 
     //clear other selections 
     $scope.gridApi.selection.clearSelectedRows(); 
     //set row as selected 
     row.setSelected(true); 
     //... 
    }