AngularJS:自定义嵌入后 ng-if 和 ng-repeat 不工作
AngularJS : ng-if and ng-repeat not working after custom transclusion
我正在尝试对 angularJS 中的指令进行自定义嵌入,因为我需要将两个单独的元素嵌入到两个单独的位置。
问题是,虽然一些指令在嵌入的内容上继续工作,例如 ng-bind
,但其他指令(例如 ng-if
或 ng-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
它肯定不像 cleanest/optimal 解决方案,我愿意接受任何其他可以做得更好的解决方案。特别是任何 DOM 事件必须在 $templateRequest
promise 被解决并在删除 $destroy
事件之前检查是否存在以确保它事先得到解决。
我正在尝试对 angularJS 中的指令进行自定义嵌入,因为我需要将两个单独的元素嵌入到两个单独的位置。
问题是,虽然一些指令在嵌入的内容上继续工作,例如 ng-bind
,但其他指令(例如 ng-if
或 ng-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
它肯定不像 cleanest/optimal 解决方案,我愿意接受任何其他可以做得更好的解决方案。特别是任何 DOM 事件必须在 $templateRequest
promise 被解决并在删除 $destroy
事件之前检查是否存在以确保它事先得到解决。