调用指令时 ng-repeat 不起作用

Question

我使用 BootGrid 数据表和 JSON 文件作为表的数据源。

服务

.service('datatableService', ['$resource', function($resource){
        this.getDatatable = function(id, email, date) {
            var datatableList = $resource("data/data-table.json");

            return datatableList.get ({
                id: id,
                email: email,
                date: date
            })
        }
    }])

控制器

.controller('datatableCtrl', function($scope, datatableService){

        //Get Data Table Data
        $scope.id = datatableService.id;
        $scope.email = datatableService.email;
        $scope.date = datatableService.date;

        $scope.dtResult = datatableService.getDatatable($scope.id, $scope.email, $scope.date);


    })

指令

.directive('bootgrid', ['$timeout', function($timeout){
    return {
        restrict: 'A',
        link: function(scope, element, attr){
            $('#data-table-basic').bootgrid({
                css: {
                    icon: 'md icon',
                    iconColumns: 'md-view-module',
                    iconDown: 'md-expand-more',
                    iconRefresh: 'md-refresh',
                    iconUp: 'md-expand-less'
                }

            });
        }   
    }
}])

HTML

<div class="table-responsive" data-ng-controller="datatableCtrl">
        <table id="data-table-basic" class="table table-striped" data-bootgrid>
            <thead>
                <tr>
                    <th data-column-id="id" data-type="numeric">ID</th>
                    <th data-column-id="sender">Sender</th>
                    <th data-column-id="received" data-order="desc">Received</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="w in dtResult.list">
                    <td>{{ w.id }}</td>
                    <td>{{ w.email }}</td>
                    <td>{{ w.date }}</td>
                </tr>
            </tbody>
        </table>
    </div>

当我运行它时，<tbody> 内没有数据，但是当我删除指令时，我可以看到所有 JSON 数据都呈现在表中。我希望 ng-repeat 和 and 指令一起工作。我试图将指令中的优先级设置为，

...
   return {
        restrict: 'A',
        priority: 1001,
        ...

但没有运气。 http://plnkr.co/edit/rWCVXTjxOGZ49CeyIn9d?p=preview

请帮我解决这个问题。如果你能修好上面的笔，我会很合适。

问候

Answer 1

Priority 设置在这里没有帮助，因为它用于调节在同一元素上定义的指令的编译顺序。

您可以使用$timeout 服务将bootgrid 指令初始化延迟到下一个摘要周期。您还需要注意数据对象的变化，因为您使用 AJAX 加载它。

app.directive('bootgrid', function($timeout) {
    return {
        link: function(scope, element, attr) {
            scope.$watch(attr.bootgrid + '.length', function(newVal, oldVal) {
                if (newVal !== oldVal && newVal) {
                    $timeout(function() {
                        element.bootgrid({
                            css: {
                                icon: 'md icon',
                                iconColumns: 'md-view-module',
                                iconDown: 'md-expand-more',
                                iconRefresh: 'md-refresh',
                                iconUp: 'md-expand-less'
                            }
                        });
                    });
                }
            });
        }
    }
});

演示： http://plnkr.co/edit/ehbzoFGOqhQedchKv0ls?p=preview