Question

我有一个数据表，我正在加载一个$ resource资源。它正在进行查询并在视图中使用ng-repeat中返回的值。一切都很好。问题是我正在尝试使用DataTables jquery插件，并且需要在表加载所有行之后运行，这意味着在使用从$ resource调用返回的更新值运行ng-repeat之后

这是我的控制器代码目前的样子：

  $scope.model = {
      roles: []
  };

  $scope.model.roles = $resource('/api/admin/user/role').query();

  $scope.$watch('model.roles', function () {
      console.log('watch called');
      handleDataTables();
  });

  var handleDataTables = function() {
      $('#rolelist').dataTable({
          "sPaginationType": "bs_full"
      });
  };

我认为当表的行已经创建时，手表会被调用，但它似乎没有那样工作。我也尝试在$ resource.query调用的成功回调中调用handleDataTables，但这也不起作用。

我可以通过在调用handleDataTables之前执行超时来使其工作，但这只是感觉很脏。

Answer 1

我对jQuery dataTable和Angular的ng-repeat也有同样的问题。最后用这段代码解决了问题。您可以尝试，我希望帮助您解决您的问题。 HTML：

<div ng-app="tableExample">
    <div ng-controller="Ctrl">
        <button ng-click="addData()">Add Data</button>
         <h2>This table uses columns defined in controller</h2> 
        <table my-table options="options"></table>
    </div>
</div>

JS代码：

var dialogApp = angular.module('tableExample', []);

dialogApp.directive('myTable', function () {
    return {
        restrict: 'E, A, C',
        link: function (scope, element, attrs, controller) {
            var dataTable = element.dataTable(scope.options);

            scope.$watch('options.aaData', handleModelUpdates, true);

            function handleModelUpdates(newData) {
                var data = newData || null;
                if (data) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(data);
                }
            }
        },
        scope: {
            options: "="
        }
    };
});

function Ctrl($scope) {
    $scope.options = {
        aoColumns: [{
            "sTitle": "Surname"
        }, {
            "sTitle": "First Name"
        }],
        aoColumnDefs: [{
            "bSortable": false,
            "aTargets": [0, 1]
        }],
        bJQueryUI: true,
        bDestroy: true,
        aaData: [
            ["Webber", "Adam"]
        ]
    };

    $scope.addData = function () {
        $scope.counter = $scope.counter + 1;
        $scope.options.aaData.push([$scope.counter, $scope.counter * 2]);
    };

    $scope.counter = 0;
}

我测试了上面的例子，它很棒。

AngularJs在ng-repeat绑定发生后运行代码

1 个答案: