Question

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

我使用的是AngularJS 1.6.6和jQuery Bootgrid 1.3.1。正在使用它的页面运行正常，网格外的所有元素都使用angular指令。所有元素都在右边的ng-app和ng-controller标记的根目录中。

问题是我在网格中有一些按钮，他们都失去了他们的事件，如onclick，工具提示等。所以我想用ng-click而不是jQuery来映射它们.click（function（）{} ）。

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

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

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

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

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

2 个答案: