Question

一旦数据被返回，我就无法找到启动指令的方法。我正在尝试使用html表和ng-repeat构建报告。报表对象是使用Factory生成的。工厂方法返回报表对象，ng-repeat构建表。我找到了一个DataTable的指令，它接受了html并应用了JQuery插件。

问题：如果在创建表之前调用了datatables指令，则会失败。我需要控制指令何时调用函数element.getTable(options)。

我找到了另一个能够确定何时使用$last完成ng-repeat的指令但有没有办法使用该ngRepeat指令从控制器启动dataTables指令？

HTML：

<!-- partials/reports/limbo.html -->
<div ng-visible="$root.ReportReady">
    <table data-name="CheckedOutFiles_Report" class="report" my-table>
        <thead>
            <tr class="reportHeader" >
                <th>Filename</th>
                <th>File Url</th>
                <th>Checked Out To</th>
                <th>Modified</th>

            </tr>           
        </thead>
        <tbody>
            <!-- new row for every file -->
            <tr ng-repeat="file in ReportModel.report" on-finish-render>
                <td>{{file.fileName}}</td>
                <td>{{file.fileUrl}}</td>
                <td>{{file.checkedTo}}</td>
                <td>{{file.modified}}</td>
            </tr>
        </tbody>
    </table>    
</div>

报告控制器：

spApp.controller('limboReportCtrl', 
    function limboReportCtrl($scope,$q,UserService,GroupService, SiteService, ReportService){

        $scope.ReportModel = {};

        $scope.createReport = function (){
            ReportService.CheckedOutFiles().then(function (data){
                console.log(data);
                $scope.ReportModel.report = data;
            })
        }
        $scope.createReport();

        $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
            //you also get the actual event object
            //do stuff, execute functions -- whatever...
            console.log('somethingsomething');
        });
    }
);

完成ng-repeat时处理回调函数的指令：

spApp.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

DataTables指令：

spApp.directive('myTable', function ($rootScope, $timeout) {
    return {
        restrict: 'E, A, C',
        link: function (scope, element, attrs, controller) {
            var reportName = $(this).data('name');
            //DATA TABLE OPTIONS 


            //THIS WORKS BUT RELIES ON A SET TIME TO CALL DATATABLES AND ISN'T DEPENDENT ON WHEN THE TABLE IS READY. IF CALLED BEFORE TABLE GENERATED, IT WILL NOT WORK
            var timer = $timeout(function (){
                console.log('calling dataTables');
                var dTable = element.dataTable(scope.options);
                new $.fn.dataTable.FixedColumns( dTable );
                $rootScope.ReportReady = true;
            },3000);

            //BEFORE THE CODE BELOW, $TIMEOUT DESTROYED PERFORMANCE OF THE ENTIRE APPLICATION. FOLLOWING THIS BLOG POST, PERFORMANCE SIGNIFICANTLY IMPROVED http://tinyurl.com/naouvv7
            timer.then(
                function (){
                    console.log("Timer resolved ", Date.now());
            },
                function (){
                    console.log("Timer rejected ", Date.now());
                }
            );

            scope.$on('$destroy',
                function(e){
                    $timeout.cancel(timer);
                }
            )
        }
    }
});

Answer 1

通过更改dataTables的指令解决了这个问题：

        scope.$watch(
            function() {return $rootScope.ReportReady}, 
            function (newValue, oldValue){
            if(newValue){
                console.log('calling dataTables');
                var dTable = element.dataTable(scope.options);
                new $.fn.dataTable.FixedColumns( dTable );
                $rootScope.ReportVisible = true;
            }
        })

在控制器中：

    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        //set a variable to true which datatables directive is watching
        //when that variable is true, initiate datatables
        $rootScope.ReportReady = true;
    });

因此，当页面渲染和ng-repeat完成时，它会更改rootScope属性。该指令正在观察该属性并发现它已被更改，因此调用该函数来创建表。所以现在我可以完全控制何时启动最后一步而不使用$ timeout。

从控制器启动指令

1 个答案: