logo标签列表

Angular UI Grid 3.x版本中的操作按钮

angularjsangular-ui-grid
23
我会尝试使用Angular UI Grid (不稳定版本)来渲染一个简单的表格。每一行都需要一个按钮，当点击时应该由我的父控制器处理。 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>

在代码中，为了渲染操作按钮，我使用了带有第三列内联模板的columnDefs。

问题

点击按钮没有反应。我期望在点击时执行$scope.clickHandler函数。此外，我应该能够将'name'作为参数传递给点击处理程序。

这里有一个类似的使用情况的 plunker，它似乎在 clickhandler 中触发了 ng-click：http://plnkr.co/edit/BZKiZoevJQ1YgR0w7yy6?p=preview - trainoasis
@trainoasis；您的Plunker看起来运行良好。但是，1）您正在使用ng-grid（UI Grid的旧版本）2）我的哪里有问题？ - Kumar Sambhav
这个 Plunker 不是我的，只是在寻找解决方案时找到的。目前我没有看到任何明显的问题，建议您与工作正常的代码并排比较，或许可以找到问题所在。 - trainoasis
4个回答
41

在我看来，比@mainguy更容易的方法是：

在您的$scope成员之前添加grid.appScope.。 例如，在您的情况下，调用$scope.clickHandler的方式如下：

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
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

谢谢。它正在工作。我在哪里可以阅读关于这种新的“隔离”范围方法的内容？ - Kumar Sambhav
1
FYI，您可以使用grid.appScope和appScopeProvider代替external-scopes。 - maxisam
6
与 @gdoron 的回答类似，但针对 controllerAs 语法。您应该在控制器中设置 appScopeProvider 选项来指向 this 对象：
this.gridOptions = {
  ...,
  appScopeProvider: this
};

接着，cellTemplate:'<button ng-click="grid.appScope.clickHandler()">点击这里</button>'

FYI: 默认情况下，ui-grid元素的父级作用域将被赋值给grid.appScope。该属性允许您将任何引用指定给grid.appScope。

你也可以使用 grid.appScope.{controllerAs变量名}.clickHandler() 这样如果你的 controllerAs 变量名是 'm'，你可以这样做 grid.appScope.m.clickHandler()。 - Travis Heeter
0
注意，如果您使用路由配置而不是直接分配app-controller，则getExternalScopes()方法将按预期工作，但需要注意以下内容：
在相应的控制器中，请分配以下语句 $scope.gridScope = $scope;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接