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

【问题标题】：AngularJs running code after ng-repeat binding happensng-repeat绑定发生后AngularJs运行代码
【发布时间】：2023-03-02 23:39:01
【问题描述】：

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

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

  $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 之前超时来使其工作，但这只是感觉很脏。

【问题讨论】：

如果可能的话，我建议不要在控制器中使用 $watch。有时这是不可避免的，但如果您尝试在更改转发器中集合的实际事件期间处理调用 handleDataTables()，您会遇到更少的问题（并且您会看到更好的性能）。
Calling a function when ng-repeat has finished 的可能重复项
我能够使用重复问题的链接中描述的 onFinishRender 指令。谢谢。

标签： jquery angularjs angularjs-ng-repeat

【解决方案1】：

我对 Angular 的 jQuery dataTable 和 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;
}

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

【讨论】：