重获角度范围

Question

我有一张表，其中显示了所有数据。 在表绑定后，我应用了tablesorter插件。

之后，ng-click不适用于该表。

我认为这是由于插件范围对象不起作用。

如何获得$ scope以便所有其他功能都可以正常工作？

我们有什么方法可以使用插件，$ scope不会丢失吗？

修改

HTML代码：

<table id="tblChangeOrder" class="table">
                    <thead class="table-header-style">
                        <tr>
                            <th data-ng-click="loadChangeOrdersBySort('OrderControlNum')" class="hand" data-sidx="OrderControlNum" style="min-width:60px;">
                                CO#
                                <span data-ng-if="changeOrderSearch.Sidx == 'OrderControlNum'" class="move-right">
                                    <span data-ng-class="changeOrderSearch.Sord == 'asc' ? 'glyphicon glyphicon-chevron-up' : 'glyphicon glyphicon-chevron-down'"></span>
                                </span>
                            </th>
                            <th data-ng-click="loadChangeOrdersBySort('RequestedBy')" class="hand" data-sidx="RequestedBy">
                                Requested By
                                <span data-ng-if="changeOrderSearch.Sidx == 'RequestedBy'" class="move-right">
                                    <span data-ng-class="changeOrderSearch.Sord == 'asc' ? 'glyphicon glyphicon-chevron-up' : 'glyphicon glyphicon-chevron-down'"></span>
                                </span>
                            </th>
                            <th data-ng-click="loadChangeOrdersBySort('CustomerPo')" class="hand" data-sidx="CustomerPo">
                                PO#
                                <span data-ng-if="changeOrderSearch.Sidx == 'CustomerPo'" class="move-right">
                                    <span data-ng-class="changeOrderSearch.Sord == 'asc' ? 'glyphicon glyphicon-chevron-up' : 'glyphicon glyphicon-chevron-down'"></span>
                                </span>
                            </th>
</tr>
                    </thead>
                    <tbody class="table-body-style">
                        <tr data-ng-repeat="changeOrderData in changeOrders">
                            <td><a href="ChangeOrders.aspx?id={{changeOrderData.Id}}">{{changeOrderData.Id}}</a></td>
                            <td>
                                <span>{{changeOrderData.ReqName}}
                                <span data-ng-if="changeOrderData.RequesterID != changeOrderData.CreatorID">Entered By:{{changeOrderData.CreName}}
                                </span>
                                </span>
                            </td>
                            <td><span>{{changeOrderData.PoNum}}</span></td>
</tr>
                    </tbody>
                </table>

JS插件代码：

$('#tblChangeOrder').tablesorter({
        showProcessing: true,
        widgets: ['scroller'],
        widgetOptions: {
            // scroll tbody to top after sorting
            //scroller_upAfterSort: true,

            // pop table header into view while scrolling up the page
            scroller_jumpToHeader: false,

            scroller_height: 400,

            // set number of columns to fix
            scroller_fixedColumns: 1,

            // add a fixed column overlay for styling
            scroller_addFixedOverlay: false,

            // add hover highlighting to the fixed column (disable if it causes slowing)
            //scroller_rowHighlight: 'hover',

            // bar width is now calculated; set a value to override
            scroller_barWidth: null
        },
        headers: {
            0: { sorter: false, filter: false },
            1: { sorter: false, filter: false },
            2: { sorter: false, filter: false }
        }
    });

Answer 1

由于你的插件，角度范围之外的DOM可能会变为生命周期。 所以你应该使用Angular + DataTable而不是使用Jquery表分类器插件。