AngularJS: ng-if和ng-repeat在自定义导入后不起作用

AngularJS : ng-if and ng-repeat not working after custom transclusion

本文关键字:自定义 导入 不起作用 ng-repeat ng-if AngularJS      更新时间:2023-09-26

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

问题是,虽然一些指令在转包内容工作中进行,如ng-bind,但其他指令,如ng-ifng-repeat,即使在用正确的作用域重新编译转包元素后也没有。

示例:http://jsbin.com/menakapoma/1/edit?html、js、输出

正如您在示例中看到的,ng-bind工作,但ng-if不工作,即使它们都在相同的作用域上并访问相同的值。ng-if的真或假状态都不行

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

有谁知道如何让这些指令工作吗?

问题是,无论如何,到transclude函数执行的时候,嵌套的指令已经被编译和替换为注释。

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

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

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

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

这当然不是最干净/最优的解决方案,我愿意接受任何其他能做得更好的解决方案。特别是任何DOM事件都必须在$templateRequest承诺被解析后绑定,并在移除$destroy事件之前检查是否存在,以确保它事先被解析。