After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx@yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www@yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz@yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.