Question

使用嵌套指令动态编译Html

我有一些代码可以动态生成一些包含angular指令的html。由于指令是后期绑定的，我需要让它们被执行并生成它们各自的模板内容。在以下示例中，详细信息行包含已动态生成的html。在该生成的行中，存在需要呈现的自定义指令（）。

编译嵌套指令的一些代码

var detailRow = e.detailRow; // This is the html I want to compile. 

angular.element(document).injector().invoke(function ($compile) {
  // Get the scope from the html
  var scope = angular.element(detailRow).scope();
  // Compile using the scope. 
  $compile(detailRow)(scope);
});

// Get some data from custom directive. 
var testId = detailRow.find("random-testees").attr("testid");

尝试管理新编译的嵌套指令

以下片段给了我有限的成功。随着超时，似乎指令按预期呈现 - catch是它只有在刷新页面时才有效。当我说渲染时，我的意思是该指令已经填写了模板内容。

// Wait, and call method on the directive. 
setTimeout(function () {
   var randomTesteesScope = $("random-testees").first().children(":first").scope();
   randomTesteesScope.loadTestees(this);
}.bind(testId),200);

清空指令

在屏幕刷新之前，始终存在一个错误，即前一代码中的第一个子节点未定义。这表明该指令尚未呈现。事实上，当我使用jQuery来查看指令元素时，我可以确认它是空的（注意指令中没有子节点）。

黑客真的没有工作

你可以看到我试图破解（200ms setTimeout）代码给出超时，以便内容有时间做任何必须做的事情来完成编译。但是，如上所述，我需要屏幕刷新任何结果。

需要确定性方法来调用loadEmployees范围函数

我需要的是在指令完成渲染后调用指令上的代码的确定方法。

错误的假设

如果编译花费时间我的假设是错误的，我如何以确定的方式呈现指令，以便我可以在呈现后执行代码。

Answer 1

这是scope.$apply的用途。特别是scope.$evalAsync（另一个调用摘要的范围方法），它将给定的函数放在队列中，以便在当前摘要之后执行，这样就不会出现digest in progress错误。

尝试：

randomTesteesScope.$evalAsync(function(){randomTesteesScope.loadTestees(this)});

的引用：

docs

Helpful article on scopes

动态列表值改变了Angular JS

1 个答案: