Kum*_*hav 22 angularjs angular-ui-grid
我试图使用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>
在代码中,为了呈现动作按钮,我使用了具有第三列的内联模板的columnDefs.
单击该按钮不起作用.我希望' $ scope.clickHandler '函数可以在点击时执行.此外,我应该能够将'name'作为参数传递给click处理程序.
gdo*_*ica 41
在我看来比@mainguy更容易:
grid.appScope.在$ scope成员之前添加.
例如在你的情况下打电话$scope.clickHandler:
cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
mai*_*guy 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
类似于@ gdoron的答案,但是controllerAs语法.在控制器中,您应该设置appScopeProvider指向this对象的选项:
this.gridOptions = {
...,
appScopeProvider: this
};
然后, cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
仅供参考:默认情况下,ui-grid元素的父作用域将分配给grid.appScope,此属性允许您为grid.appScope分配所需的任何引用.
| 归档时间： |
|
| 查看次数： |
25828 次 |
| 最近记录： |