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'