UI-Sortable 不適用於動態 Angular 數據表

Question

我在我的應用程序中使用Angular DataTables並創建了一個帶有嵌套行的動態表，並嘗試在父行上添加可排序功能。 我試圖添加ui-sortable但不工作。

這是HTML代碼：

    <div class="panel-body table-responsive" ng-show="lstFormatFileMetaDetails != null">
       <table id="tblFileMetaColumnsDetail" name="tblFileMetaColumnsDetail" datatable="" dt-options="dtFileMetaColumnsDetailOptions" dt-columns="dtFileMetaColumnsDetailColumns" dt-instance="dtFileMetaColumnsDetailInstance" class="display table table-striped table-bordered table-hover">
          <!--  THIS TABLE IS GENERATED DYNAMICALLY -->
       </table>
    </div>

這是javascript代碼：

     //CREATE ANGULAR DATA TABLE
            function createTable() {
                $scope.dtFileMetaColumnsDetailInstance = {};
                $scope.dtFileMetaColumnsDetailOptions = DTOptionsBuilder.fromSource($scope.lstFormatFileMetaDetails)
                    .withOption('data', $scope.lstFormatFileMetaDetails) //pass data source here
                    .withOption('dataSrc', '')
                    .withOption('rowCallback', rowCallback)
                    .withOption('createdRow', createdRow)
                    .withLanguage({                 
                        loadingRecords: "No data available in table"                    
                    })
                    .withButtons([
                        'excel',
                            {
                                text: 'Reset',
                                action: function (e, dt, node, config) {
                                    $("#tblFileMetaColumnsDetail").DataTable().search("").draw();
                                }
                            }]);

                //define columns
                var metaColName = $scope.$translate("Meta Col Name");
                var mapping = $scope.$translate("Mapping");
                var minWidth = $scope.$translate("Min Width");
                var incrementalUnique = $scope.$translate("Incremental Unique");
                var correctionUnique = $scope.$translate("Correction Unique");


                var action = $scope.$translate("Action");
                $scope.dtFileMetaColumnsDetailColumns = [
                    DTColumnBuilder.newColumn('btn').withTitle('').withOption('width', '5%'), //this is to show the '+' button
                    DTColumnBuilder.newColumn('#').withTitle('#'),
                    DTColumnBuilder.newColumn('metaColumnName').withTitle(metaColName),
                    DTColumnBuilder.newColumn('primaryColumnName').withTitle(mapping),
                    DTColumnBuilder.newColumn('minWidth').withTitle(minWidth),
                    DTColumnBuilder.newColumn('isIncrementalUnique').withTitle(incrementalUnique),
                    DTColumnBuilder.newColumn('isCorrectionUnique').withTitle(correctionUnique),       
                    DTColumnBuilder.newColumn('actionButton').withTitle(action).withOption('width', '9%'),

                ];
                var b = document.querySelector("#tblFileMetaColumnsDetail tbody"); 
                if(b!=null){                    
                    b.setAttribute("ui-sortable","");   
                }

            }


            var id = 0;
            //CALLED WHEN ROW IS CREATED
            function createdRow(row, data, dataIndex) {
                $(row).attr('id', id);
                $(row).attr('class', 'ui-sortable-handle');
                // Recompiling so we can bind Angular directive
                $compile(angular.element(row).contents())($scope);

                id++;
            }


            /*************** End - HANDLING DATATABLE SUBGRID **************/

這是創建的表。

我在createTable()函數的 tbody 中添加了ui-sortable屬性。當我在檢查元素中看到時，屬性已成功添加。 但是當我在另一個靜態數據表中添加了相同的屬性時。 它工作正常。

根據我的理解，問題是ui-sortable在ng-repeat上工作。 但我已經動態創建了行。

我確實搜索過，但沒有得到確切的解決方案。 任何形式的幫助將不勝感激。

Answer 1

1- 聽語言變化之后呈現表格。

  $rootScope.$on('$translateChangeEnd', function (event, lang) {
    $scope.dtInstanceDocsSign.rerender();
  });