Angularjs UI Sortable无法处理动态角度数据表

我正在应用程序中使用，创建了一个具有嵌套行的动态表，并尝试在父行上添加可排序功能。我已尝试添加可排序的

ui

，但不起作用

以下是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>

这是创建的表

我在

createTable（）

函数的tbody中添加了

ui sortable

属性。当我在inspect元素中看到时，属性添加成功。但是当我在另一个静态数据表中添加了相同的属性时。很好用

根据我的理解，问题在于

ui可排序

正在处理

ng重复

。但是我已经动态地创建了行

我搜索了一下，但没有找到确切的答案。 任何形式的帮助都将不胜感激

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