23

我正在尝试使用Angular UI Grid (unstable version)呈现一个简单的表格。在我的父控制器中处理每行我需要单击时的按钮。

普朗克

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>

在代码中，为了呈现操作按钮，我使用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>'
}

这是你的分叉Plunker

于 2014-12-23T16:32:45.077 回答
6

类似于@gdoron 的答案，但controllerAs语法。在您的控制器中，您应该将appScopeProvider选项设置为指向this对象：

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

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

仅供参考：默认情况下，ui-grid 元素的父范围将分配给 grid.appScope 此属性允许您将任何引用分配给 grid.appScope

于 2015-11-25T15:06:24.830 回答
0

请注意，如果您使用路由配置而不是直接分配应用程序控制器，则 getExternalScopes() 方法会按预期工作，并附注

在相应的控制器中，分配以下语句 $scope.gridScope = $scope;

于 2015-06-01T16:22:35.177 回答