23

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

プランカー

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」関数が実行されることを期待しています。また、「名前」を引数としてクリック ハンドラに渡すことができるはずです。

4

4 に答える 4

41

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

grid.appScope.$scope メンバーの前に追加します。
たとえば、あなたの場合は次のように呼び出します$scope.clickHandler:

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
于 2015-04-20T15:25:52.617 に答える
21

新しいものでは、すべてがスコープ内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>'
}

これが分岐したプランカーです

于 2014-12-23T16:32:45.077 に答える