草庐IT

javascript - Angular : ng-if and ng-repeat not working after custom transclusion

coder 2025-01-16 原文

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

问题是,虽然一些指令在嵌入的内容上继续工作,例如 ng-bind 其他指令,例如 ng-ifng-repeat 不要这样做,即使在使用正确的范围重新编译被嵌入的元素之后也是如此。

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

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

我相信这是因为 ng-if 指令被嵌入为注释,但是即使我将嵌入指令的优先级设置为 9999 并在预联动功能还是不行。

有谁知道如何让这些指令起作用?

最佳答案

问题是无论 transclude 函数何时执行,嵌套指令都已经编译并替换为注释。

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

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

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

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

它肯定不是最干净/最佳的解决方案,我愿意接受任何其他可以做得更好的解决方案。特别是在 $templateRequest promise 被解析并检查是否存在之后,必须绑定(bind)任何 DOM 事件,然后再移除 $destroy 事件,以确保它事先被解析。

关于javascript - Angular : ng-if and ng-repeat not working after custom transclusion,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30467793/

有关javascript - Angular : ng-if and ng-repeat not working after custom transclusion的更多相关文章

随机推荐