jquery - AngularJs 在 ng-repeat 绑定(bind)发生后运行代码

Question

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

这是我的 Controller 代码目前的样子:

  $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"
      });
  };

我认为当表的行已经创建时， watch 就会被调用，但它似乎并没有以这种方式工作。我还尝试在 $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;
}

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