AngularJS 可以与 jQuery bootgrid 一起使用吗？

Question

在阅读了关于 jQuery Bootgrid 和 AngularJS 的所有主题 2 天后，我仍然无法在生成的网格上使用 angular 指令。

我正在使用 AngularJS 1.6.6 和 jQuery Bootgrid 1.3.1。使用它的页面运行正常，网格外的所有元素都在使用 angular 指令。所有元素都在正确的 ng-app 和 ng-controller 标签内。

问题是我在网格内有一些按钮，它们都丢失了它们的事件，如 onclick、工具提示等。所以我想使用 ng-click 而不是 jQuery .click 来映射它们(函数 () {}).

没有错误消息，只有事件没有触发。

指令内指向的所有函数都在我的范围内声明。

我几乎得出结论，jQuery Bootgrid 隔离了它自己的范围并避免 angular 进入它。那会继续吗？

<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>

Answer 1

首先你必须有一个函数（例如ngFunction）然后试试：

<button id="something" ng-click="ngFunction(doSomething)">

Answer 2

由于没有确定的答案，我更改了我的组件并停止寻找此兼容性问题。我仍然认为有一种方法可以将网格插件附加到我的 angularjs 范围，但时间不在我这边。

AngularJS 可以与 jQuery bootgrid 一起使用吗？

Can AngularJS be used with jQuery bootgrid?

javascript

jquery

angularjs

jquery-bootgrid