Javascript 调用指令时，ng repeat不起作用

我使用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
            })
        }
    }])

.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'
                }

            });
        }   
    }
}])

控制器

.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);


    })

指令

.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
            })
        }
    }])

.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>

但是没有运气

请帮我修一下。如果你能修好这支笔，我会很感激的

“注意”

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

您可以使用服务将

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'
                            }
                        });
                    });
                }
            });
        }
    }
});

---

演示：

感谢您的回复。当我使用本地数据时，您的方法有效。当从JSON文件调用数据时，就像我上面的例子一样，它不起作用。这很酷。我有两个疑问。这意味着，scope.$watch（attr.bootgrid+'.length'，function（newVal，oldVal）{您是否在此处查找属性的任何更改，请您解释一下您在此处添加的额外代码datatableService.getDatatable（$scope.id，$scope.email，$scope.date）。$promise.then（function（data）{This.datalist=data；}.bind（This））；否，它监视数据数组长度的更改。最初它是未定义的，因为数组未定义，加载时它将不同。请在范围上下文中计算提供给

$watch

的字符串的值。数据绑定工作不正常。如果以后更改数据列表，则网格不会反映更改