web-dev-qa-db-ja.com

Angular UI Grid 3.xバージョンのアクションボタン

Angular UI Grid（unstable version） を使用して単純なテーブルをレンダリングしようとしています。各行に対して、クリックされたときにボタンが必要なのは、親コントローラーで処理する必要があります。

Plunker

Javascript：-

angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
  console.log("Controller is up.");
  $scope.data = [];
  for (var i = 0; i < 50; i++) {
    $scope.data.Push({
      fullName: "Name" + i,
      age: i
    });
  }

  $scope.clickHandler = function(){
    // this never gets invoked ?!
    console.log("Row Action click Handler.");
  };


  $scope.gridOptions = {
    data: $scope.data,
    columnDefs:[ {name:'fullName',field:'fullName'},
              {name:'age',field:'age'},
              {name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
            ]
  };
});

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css">
  <link rel="stylesheet" href="style.css">
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <script src="script.js"></script>
</head>

<body data-ng-app="app">
  <h1>Angular UI Grid unstable</h1>
  <div data-ng-controller="appController">
    <div class="grid" ui-grid="gridOptions">
      Test 
    </div>
  </div>

</body>

</html>

コードのように、アクションボタンをレンダリングするために、3列目のインラインテンプレートでcolumnDefsを使用しました。

問題

ボタンをクリックしても機能しません。 '$ scope.clickHandler'関数がクリック時に実行されることを期待しています。また、クリックハンドラーへの引数として 'name'を渡すことができるはずです。

angularjsangular-ui-grid
22
Kumar Sambhav

新しいui-gridすべてがisolatedスコープで発生します。そこで、externalスコープを処理する機能を追加しました。

対処方法は次のとおりです。

HTMLで次のようにグリッドを定義します。

<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">

また、外部スコープオブジェクト（呼び出し可能な関数を含む）をコントローラーに追加します。

 $scope.clickHandler = {
     onClick : function(value){
        alert('Name: '+value);
     }
 };

最後に、cellTemplateを次のように定義します。

{
    name:'Action',
    cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}

これがあなたのフォークです Plunker

21
mainguy

私の意見では@mainguyより簡単です：

$ scopeメンバーの前にgrid.appScope.を追加します。
たとえば、$scope.clickHandlerを呼び出す場合：

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
41
gdoron

@gdoronの答えに似ていますが、controllerAs構文を使用します。コントローラーで、appScopeProviderオプションをthisオブジェクトを指すように設定する必要があります。

_this.gridOptions = {
  ...,
  appScopeProvider: this
};
_

次に、cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

[〜＃〜] fyi [〜＃〜]：デフォルトでは、ui-grid要素の親スコープがgrid.appScopeに割り当てられます。このプロパティを使用すると、グリッドに参照を割り当てることができます。 .appScope

6
lvarayut

アプリコントローラーを直接割り当てる代わりにルーティング構成を使用している場合、getExternalScopes（）メソッドは1つのメモで期待どおりに機能します。

それぞれのコントローラーで、以下のステートメントを割り当てます$ scope.gridScope = $ scope;

0
vonbalaji