我正在尝试使用 Angular UI Grid (unstable version) 呈现一个简单的表格.
对于每一行，我需要一个按钮，点击时应该在我的父 Controller 中处理。
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 ' 要在单击时执行的函数。此外，我应该能够将“名称”作为参数传递给点击处理程序。
最佳答案
中新ui-grid一切都发生在 isolated范围。所以他们添加了处理 external 的功能范围。
这是该怎么做:
在 html 中定义你的网格是这样的:
<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">
还将外部作用域对象(带有可调用函数)添加到您的 Controller 中:
$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>'
}
这是你的 fork Plunker
关于angularjs - Angular UI Grid 3.x 版本中的操作按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27621321/