I am attempting to do custom transclusion of a directive in angularJS as I need to transclude two separate elements into two separate locations.
我试图在angularJS中自定义转换指令,因为我需要将两个单独的元素转换为两个单独的位置。
The issue is that whilst some directives carried over on the transcluded content work such as ng-bind others such as ng-if or ng-repeat do not, even after recompiling the transcluded elements with the correct scope.
问题在于,虽然某些指令延续了被转换的内容工作,例如ng-bind其他如ng-if或ng-repeat,但即使在重新编译具有正确范围的已转换元素之后也是如此。
Example: http://jsbin.com/menakapoma/1/edit?html,js,output
As you can see in the example the ng-bind works but the ng-if does not even though they are both on the same scope and accessing the same value. Neither the true or false state of the ng-if works.
正如您在示例中所看到的,ng-bind有效但ng-if即使它们都在同一范围内并且访问相同的值也不行。 ng-if的真或假状态都不起作用。
I believe this is because the ng-if directive gets transcluded as a comment, however even if I set the priority of the transcluding directive to 9999 and perform it in the pre-linkage function it still does not work.
我相信这是因为ng-if指令被转换为注释,但是即使我将transcluding指令的优先级设置为9999并在预连接函数中执行它仍然不起作用。
Does anyone know how to get these directives working?
有谁知道如何使这些指令有效?
1 个解决方案
#1
1
The issue is that no matter what by the time the transclude function executes the nested directives have already been compiled and replaced with comments.
问题在于,无论转码函数执行的时间是什么,嵌套指令都已编译并替换为注释。
I have managed to achieve this by completely foregoing the transclude options, and manually requesting the template via $templateRequest.
我已经设法通过完全转发transclude选项来实现这一点,并通过$ templateRequest手动请求模板。
I specify a compile function which replaces the element with a comment placeholder to ensure nothing is rendered during the request.
我指定一个编译函数,用一个注释占位符替换该元素,以确保在请求期间不呈现任何内容。
In the linkage function I manually compile the template and then replace directive's element with it.
在链接函数中,我手动编译模板,然后用它替换指令的元素。
See the updated example here: http://jsbin.com/rocedarono/3/edit?html,js,console,output
请参阅此处更新的示例:http://jsbin.com/rocedarono/3/edit?html,js,console,output
It certainly doesn't feel like the cleanest/optimal solution and I am open to any other solutions that can do it a little nicer. Especially as any DOM events have to be bound to after the $templateRequest promise is resolved and checked for existence before removal on the $destroy event to ensure it resolved beforehand.
它当然不是最干净/最优的解决方案,我对任何其他可以做得更好的解决方案持开放态度。特别是在$ templateRequest promise被解析之后必须绑定任何DOM事件,并在$ destroy事件中删除之前检查它是否存在,以确保它事先得到解决。
#1
1
The issue is that no matter what by the time the transclude function executes the nested directives have already been compiled and replaced with comments.
问题在于,无论转码函数执行的时间是什么,嵌套指令都已编译并替换为注释。
I have managed to achieve this by completely foregoing the transclude options, and manually requesting the template via $templateRequest.
我已经设法通过完全转发transclude选项来实现这一点,并通过$ templateRequest手动请求模板。
I specify a compile function which replaces the element with a comment placeholder to ensure nothing is rendered during the request.
我指定一个编译函数,用一个注释占位符替换该元素,以确保在请求期间不呈现任何内容。
In the linkage function I manually compile the template and then replace directive's element with it.
在链接函数中,我手动编译模板,然后用它替换指令的元素。
See the updated example here: http://jsbin.com/rocedarono/3/edit?html,js,console,output
请参阅此处更新的示例:http://jsbin.com/rocedarono/3/edit?html,js,console,output
It certainly doesn't feel like the cleanest/optimal solution and I am open to any other solutions that can do it a little nicer. Especially as any DOM events have to be bound to after the $templateRequest promise is resolved and checked for existence before removal on the $destroy event to ensure it resolved beforehand.
它当然不是最干净/最优的解决方案,我对任何其他可以做得更好的解决方案持开放态度。特别是在$ templateRequest promise被解析之后必须绑定任何DOM事件,并在$ destroy事件中删除之前检查它是否存在,以确保它事先得到解决。