angularjs – 角度UI Grid 3.x版本中的操作按钮

发布时间：2020-12-17 08:12:59 所属栏目：安全来源：网络整理

导读：我试图用 Angular UI Grid (unstable version)渲染一个简单的表。对于每一行，我需要一个按钮，当单击应该在我的父控制器处理。 Plunker 使用Javascript： – angular.module("app",['ui.grid','ui.grid.edit','ui.grid.selection','ui.grid.pagination','u

我试图用 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>

像代码一样，为了渲染动作按钮，我已经对列第三列使用了columnDefs和内联模板。

问题

点击按钮不起作用。我希望在点击时执行’$ scope.clickHandler’功能。此外，我应该能够将’name’作为参数传递给点击处理程序。

在新的电网中，一切都发生在孤立的范围内。所以他们添加了处理外部范围的功能。

这是做什么

在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!