As I delve into creating tables with UI-Grid, I encountered an issue where I need to trigger a scope function when the content of a cell is clicked. Essentially, I want an alert to pop up when a cell is clicked on. Below is my JavaScript code snippet:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [{name: 'ID', field: 'id', cellTemplate: '<a ng-href="#" ng-click="test()">{{row.entity.id}}</a>'}];
$scope.test = function() {
window.alert("Alert");
}
}]);
Furthermore, here's the structure of my web page:
<!doctype html>
<html ng-app="app" class="ng-scope">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/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.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<style type="text/css">
.grid {
width: auto;
height: 500px;
margin-left: 50px;
margin-right: 50px;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid0" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
</div>
</body>
</html>
Despite following this setup, the functionality does not work as intended and troubleshooting remains ongoing.