Menu
I am trying to render a simple table using Angular UI Grid (unstable version). Against each row I need a button when clicked should be handled in my parent 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>
As in code, to render the action button I have used columnDefs with inline template for the third column.
Clicking the button doesn't work. I expect ' $scope.clickHandler' function to be executed on click. Also, I should be able to pass 'name' as argument to the click handler.
459
Easier than @mainguy in my opinion is:
Adding grid.appScope. before your $scope member.
For example in your case to call $scope.clickHandler:
cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
In the new ui-grid everything happens in an isolated scope. So they added functionality to handle external scopes.
Here is what to do:
In the html define you grid like this:
<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">
Also add the external scope object (with a callable function) to your controller:
$scope.clickHandler = {
onClick : function(value){
alert('Name: '+value);
}
};
Finally define your cellTemplate like this:
{
name:'Action',
cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}
Here is your forked Plunker
30
Similar to @gdoron's answer but for controllerAs syntax. In your controller, you should set appScopeProvider option to point to this object:
this.gridOptions = {
...,
appScopeProvider: this
};
Then, cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
FYI: by default, the parent scope of the ui-grid element will be assigned to grid.appScope this property allows you to assign any reference you want to grid.appScope
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
