AngularJS：自定义嵌入后 ng-if 和 ng-repeat 不起作用

Question

我正在尝试在 angularJS 中对指令进行自定义嵌入，因为我需要将两个单独的元素嵌入到两个单独的位置。

问题在于，尽管某些指令在转入内容上继续工作，例如 ng-bind，但其他一些指令（例如 ng-if 或 ng-repeat）则不会，即使在使用正确范围重新编译转入的元素之后也是如此。

示例：http://jsbin.com/menakapoma/1/edit?html,js,output

正如您在示例中看到的那样，ng-bind 有效，但 ng-if 无效，即使它们都在同一范围内并访问相同的值。 ng-if 的真假状态都不起作用。

我相信这是因为 ng-if 指令被嵌入为注释，但是即使我将嵌入指令的优先级设置为 9999 并在预链接功能中执行它仍然不起作用。

有人知道如何使这些指令起作用吗？

Answer 1

问题在于，无论何时，transclude 函数执行嵌套指令已经被编译并替换为 cmets。

我已经设法通过完全放弃嵌入选项并通过$templateRequest手动请求模板来实现这一点。

我指定了一个编译函数，它用注释占位符替换元素，以确保在请求期间不呈现任何内容。

在链接函数中，我手动编译模板，然后用它替换指令的元素。

在此处查看更新的示例：http://jsbin.com/rocedarono/3/edit?html,js,console,output

这当然不是最干净/最佳的解决方案，我愿意接受任何其他可以做得更好的解决方案。尤其是在 $templateRequest 承诺解决后必须绑定任何 DOM 事件，并在删除 $destroy 事件之前检查其是否存在，以确保事先解决。