0

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>
macfoli
  • 1
  • 4
  • AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc... For more information, see [AngularJS Developer Guide - Integration with the Browser Event Loop](https://docs.angularjs.org/guide/scope#integration-with-the-browser-event-loop). – georgeawg Nov 30 '17 at 16:28
  • Consider using [Angular UI Grid](http://ui-grid.info/), a data grid for AngularJS; part of the AngularUI suite. – georgeawg Nov 30 '17 at 16:43
  • I migrated all my code to the controller and all my functions to the $scope. After that I applyed every change with the $scope.$apply() method. Still no response from the clicks inside the bootgrid control. The problem is that this is a huge legacy system and we have no resources to change components right now... – macfoli Nov 30 '17 at 16:58
  • When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – georgeawg Nov 30 '17 at 17:34
  • Yeah, you are right! Just updated my question :) – macfoli Nov 30 '17 at 18:23
  • The jQuery plugin adds the template to the DOM without compiling and linking it to the AngularJS framework. That's why the `ng-click` directive in that template fails to invoke the function in the controller. Mixing jQuery and AngularJS like this is asking for grief. The robust solution is to re-write the jQuery plugin so that it is AngularJS aware and create a [custom directive](https://docs.angularjs.org/guide/directive) to invoke it on the desired element. – georgeawg Nov 30 '17 at 19:03
  • That woudn't work for me as we have hundreds of screens using this same plugin. If this is final I won't use AngularJS. Isn't there a way of making this elements join the Angular context? – macfoli Nov 30 '17 at 20:02

2 Answers2

0

First you must have a function (eg ngFunction) and then try:

<button id="something" ng-click="ngFunction(doSomething)">
georgeawg
  • 48,608
  • 13
  • 72
  • 95
el_pap
  • 14
  • 1
  • 6
  • I have my functions declared on the controller, inside my $scope variable. On the element I assign it with ng-click="example()". Where do I have to put this ngFunction you mentioned? I don't understand. – macfoli Nov 30 '17 at 15:13
  • Yes, thats what I got... At the same container, a div, I have a button and bellow it I have the grid, with the search box template customized. Both got the same ng-click function, the button fires it, the search box don't... – macfoli Nov 30 '17 at 16:49
  • If the `ng-click` attribute is added by a jQuery plugin, it needs to be integrated with the AngularJS framework using the [AngularJS $compile service](https://docs.angularjs.org/api/ng/service/$compile). – georgeawg Nov 30 '17 at 16:56
  • I added a code snippet to demonstrate the problem :) – macfoli Nov 30 '17 at 18:23
0

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.

macfoli
  • 1
  • 4