Angular UI bootstrap Modal is not working with AEM and sightly

Question

In my application, I am using Angular UI bootstrap with AEM and having the sightly parameters in the same.

The issue is, when I try to access the sightly parameters inside the script tag of UI modal It is not rendenring the sightly parameters.

< script type="text/ng-template" id="/view2.tpl" data-sly-include="template.html">
   ${properties.title}
< /script >

This specific problem is there with Sightly with AEM and angular. Can anyone suggest how to make a Modal work for Angular+AEM+sightly?

Help will be highly appreciated.

Answer 1

As per the specification, using data-sly-include will cause the content of the <script> tag to be replaced with the content of the included script.

If you want to use HTL/Sightly templates from template.html you should instead write data-sly-use.tpl="template.html"

Answer 2

First, for using templates, use the data-sly-use instead of data-sly-include.

Second, HTL (Sightly) escapes the expressions by default depending on the context where they are used. You can explicitly specify the context using the context option as shown below.

<script type="text/ng-template" id="/view2.tpl">
    <!--/* Use scriptString if you are using the value as a string */-->
    ${properties.title @ context='scriptString'}
    <!--/* In case you are trying to output an entire function or javascript, 
     there is no context specifically available for that. So, you can use the 
     unsafe option to disable escaping completely */-->
    ${properties.title @ context='unsafe'}
</script>

More information on Display Context can be found here and information on Template and Call here.