script tag breaks sightly data-sly tag in author mode

Question

I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource. Below example code will give you clear idea.

 <script type="text/ng-template" id="example.html">
    <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage"  >
        <div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
    </section>
 </script>

It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.

And removing script tag is not an option as well.

So how can I stop script tag form breaking sightly functionality in edit mode?

Answer 1

I ended up doing repetition of code , one for author mode and other for non edit mode.

Below is close resemblance of my solution.

    <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage"  data-sly-test="${wcmmode.edit}" >
      <div ng-include="'private/textOverImage.html'"></div>
    </section>

    <script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
       <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage"  >
         <div ng-include="'private/textOverImage.html'"></div>
       </section>
     </script>

As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".

I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used @ context='unsafe'

Answer 2

There is a workaround based on the Sightly Reference

1. Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
2. In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>

In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the @ context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below

<script type="text/ng-template">
    //mymarkup.html evaluated content here
</script>

Answer 3

In your script tag you could add data-sly-unwrap="${wcmmode.edit}"

This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.

Answer 4

I found the following mention in Netcentric's AEM Sightly Style Guide:

Then, because the HTML grammar ignores elements located inside a < script > or < style > elements, no block statement can be used within them.

Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.