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

【问题标题】：Can AngularJS be used with jQuery bootgrid?AngularJS 可以与 jQuery bootgrid 一起使用吗？
【发布时间】：2017-11-30 14:06:59
【问题描述】：

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

我正在使用 AngularJS 1.6.6 和 jQuery Bootgrid 1.3.1。使用它的页面运行良好，网格外的所有元素都使用角度指令。所有的元素都在正确的 ng-app 和 ng-controller 标记的根目录中。

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

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

指令中指向的所有函数都在我的作用域中声明。

我几乎可以得出结论，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>

【问题讨论】：

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等……更多信息，请参阅AngularJS Developer Guide - Integration with the Browser Event Loop。
考虑使用Angular UI Grid，AngularJS 的数据网格； AngularUI 套件的一部分。
我将所有代码迁移到控制器，将所有函数迁移到 $scope。之后，我使用 $scope.$apply() 方法应用了所有更改。 bootgrid 控件内的点击仍然没有响应。问题是这是一个巨大的遗留系统，我们现在没有资源来更改组件......
当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。见How to create a Minimal, Complete, and Verifiable example。
是的，你是对的！刚刚更新了我的问题:)

标签： javascript jquery angularjs jquery-bootgrid

【解决方案1】：

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

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

【讨论】：

我在控制器上声明了我的函数，在我的 $scope 变量中。在元素上，我用 ng-click="example()" 分配它。我必须把你提到的这个 ngFunction 放在哪里？我不明白。
是的，这就是我得到的......在同一个容器中，一个 div，我有一个按钮，在它下面我有网格，搜索框模板是自定义的。两者都有相同的 ng-click 功能，按钮触发它，搜索框不...
如果ng-click属性是jQuery插件添加的，则需要使用AngularJS $compile service与AngularJS框架集成。
我添加了一个代码sn-p来演示这个问题:)

【解决方案2】：

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

【讨论】：