加载 HTML 后如何处理指令（使用 jQuery 数据表）？

Posted 2023-05-09

【中文标题】加载 HTML 后如何处理指令（使用 jQuery 数据表）？

【英文标题】：How to process a directive AFTER it's HTML is loaded (using jQuery Datatables)?

【发布时间】：2017-07-25 06:11:01

【问题描述】：

Angular 应用程序已嵌入到一个 jquery 应用程序中，该应用程序使用数据表插件来显示表格。 在该表中，按钮和链接的 html 是在页面加载完成并完成服务器端 AJAX 调用后生成的。

我编写了一个属性级指令my-directive，它应用于那些生成的HTML 按钮。 喜欢<button my-directive>delete</button>

由于 Angular APP 初始化后生成 HTML，my-directive 属性无效。

AJAX 调用完成后如何处理指令？

（我正在从数据表的 drawCallback 方法中捕获 AJAX 调用完成的事件。

【问题讨论】：

不要让我们乱猜，请出示您的代码

@davidkonrad : 相关 - ***.com/questions/42648788/…

【参考方案1】：

解决办法是

使用 Angular 重新编译数据表生成的 HTML。 用编译后的版本替换 HTML。

为此，我们应该将以下代码添加到数据表配置中--

 var exampleTable = $("#table_id").DataTable(
 "drawCallback": function( settings ) 

            angular.element(document).injector().invoke(['$compile', function ($compile) 
                    // Create a scope.
                    var $scope = angular.element(document.body).scope();
                    // Specify what it is we'll be compiling.
                    var to_compile = $("#table_id").html();
                    // Compile the tag, retrieving the compiled output.
                    var $compiled = $compile(to_compile)($scope);
                    // Ensure the scope and been signalled to digest our data.
                    $scope.$digest();
                    // Replace the compiled output to the page.
                    $("#table_id").html($compiled);
                ])