ui-gridで右クリックメニューng-context-menuを使用する

自分の穴は自分で埋める

プロジェクトの中で手間を省くためにui-gridを使って、ちょうど効果を見始めたばかりです!それからますます多くなって..この穴の印象は比较的に深く记录してよくなりました

ui-gridについて

公式サイト:http://ui-grid.info/

なんというか、文書はまだそろっていて(時々GFWをひっくり返す)、starも多く、出会った問題のネット上でも基本的に解決方法が見つかります

需要ui-gridでレンダリングされたテーブルで右クリックメニューを使用し、rowをダブルクリックして指定方法を実行します.効果は味噌紫です.
構想

まずissueを探して、ここで著者らは、カスタムrowTemplateを使用してカスタムコマンドを作成して右クリックを傍受できることをよく知っています.

前に右クリックメニューのプラグインng-context-menuを使ったことがあるので、また検索してみると、すでに誰かが使っていて、問題がないように見えます.

コード#コード#
まずカスタムrowTemplate

  $scope.gridOptions = {
    paginationPageSizes: [30, 50, 100],
    paginationPageSize: 30,
    enableRowSelection: true,
    enableSelectAll: false,
    enableRowHeaderSelection: false,
    multiSelect: false,
    noUnselect : true,
    enableSorting: false,
    enableColumnMenus: false,//      
    useExternalPagination: true,
    rowTemplate: './src/case/views/rowTemplate.html'
  };

上の他のプロパティの公式ドキュメントでは詳しく説明しています.
そしてrowTemplateと右クリックメニューhtml

私はここでrowの色とrowHeaderのアイコンをカスタマイズしたので、主にこの文を見ればいいです.

context-menu="grid.api.selection.selectRow(row.entity)" target="myMenu" ng-dblclick="grid.appScope.goReport()"

そのうちcontext-menuはng-context-menuの命令で、1つのコールバック関数を伝えて、右ボタンの時に呼び出すことができて、私のここのコールバック関数はui-grid publicApiの中のselectRowで、右ボタンをクリックすると先にこの行

を選択します

targetの後に続くのは、右クリックで表示するdivのid

です.

ng-dblclickの後に続くのはダブルクリックの方法(これは後appScopeで言う)

です.
この時は基本的に差は多くありませんが、ui-routerルートを使っています.メニューdomはrowTemplateと一緒に置くとずれ問題が発生するので、私のメニューdomは上に何層か置いてあります.さらにposition_fixedというclassです.

.position_fixed{
  position: fixed;
  z-index: 9999;
}

レベルが足りないui-gridのscope問題についてui-gridのrowTemplateの中でcontrollerの中の方法を使うことができないので、具体的にはよく分かりませんが、解決策があります.appScopeのcontrollerの中のコードを定義するのは以下の通りです.

  $scope.gridOptions.appScopeProvider = {
    goSomewhere : function(){
        //code here 
    }
  };

私の上のng-dblclickが呼び出したこの方法は
バージョン#バージョン#

angularjs: 1.3.20

angular-ui-grid: 3.0.7

ng-context-menu: 1.0.1