响应模式下的数据表ng-click无效

时间:2016-11-01 12:27:32

标签: javascript jquery angularjs datatables

我有一个由angulars ng-repeat填充的数据表。下面的代码是我正在使用的,我只更改了标题和正在重复的内容。

这一切都完美无缺,直到我在移动设备上测试并且桌子变得响应,添加带圆圈的小符号以展开并查看隐藏列中的数据。当发生这种情况时,更多信息"按钮根本不再起作用。

根据我的推测,点击小+号时出现的信息会在您点击时动态添加,这意味着"更多信息"按钮是原始的副本,它仍然在隐藏的表列中。我认为这会导致ng-click事件无法连接"。

有人知道我是否正确和/或如何解决此问题?

<table id="dtTransactions" datatable="ng" class="table table-bordered dt-responsive dataTable no-footer dtr-inline collapsed">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
            <th>header 4</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.eyecolour }} }}</td>
            <td>{{ person.shoesize }} }}</td>
            <td align="center">
                <button type="button" class="btn btn-default" ng-click="doSomething(person)">More Info</button>
            </td>
        </tr>
    </tbody>
</table>

这是我的控制器打字稿。我使用打字稿是非常新的,基本上是复制已经在这个系统中的内容并为我自己的工作重新调整它:

module app.agreement {
    'use strict';

    class DetailController {
        // some variable declared

        static $inject = ['$compile', '$scope', 'data', 'app.services.AgreementService', '$mdDialog']
        constructor(private $compile: ng.ICompileService, 
                    private $scope: ng.IScope, 
                    private data: any, 
                    private agreementService: app.services.IAgreementService, 
                    private mdDialog: angular.material.IDialogService) {

            $('#dtTransactions').on('responsive-display', function () {
                alert('asd');
                //var c = $compile($('#dtTransactions').html());
                //c($scope);
                //$scope.$apply();
            });

            this.init();
        }

        init(): void {
            // variables initialised
        }
    }

    angular.module('app.agreement')
        .controller('app.agreement.DetailController', DetailController);
} 

2 个答案:

答案 0 :(得分:0)

我认为移动设备需要ngTouch

答案 1 :(得分:0)

您实现功能的方法是错误的。您可以尝试使用$index解决方法,而无需重复按钮,如下所示。

{{1}}