Thymeleaf and <script type="text/ng-template">

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Thymeleaf and <script type="text/ng-template">

Dejan Cabrilo
Hello everyone.

I am using Thymeleaf and AngularJS alongside it. I have some angular inline templates that look like:

    <span th:text="|foo|"></span>
    <script type="text/ng-template" id="templatename">
        <div ng-controller="BlogEditCtrl as vm">
            <span th:text="|bar|"></span>
        </div>
    </script>

The first span will print foo. However, the second one won't print bar because it's within a script tag. As far as angular goes, I have to use script of type text/ng-template for these inline templates, and it seems that as far as Thymeleaf goes, I can't use th:* attributes within a script tag.

What should I do to be able to get Thymeleaf to work inside a script tag as it does normally? If I understand correctly, Thymeleaf offers script inlining for dart and javascript - but that's no good in this case, since angular is "abusing" script tags a little.

Thanks,
Dejan

P.S. I am aware that it's perhaps the best practice to fetch any data for angular templates using angular itself, but I'd like to minimize requests to the server and simplify my code by pre-rendering some stuff.
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and <script type="text/ng-template">

Zemi
Administrator
Hello,

I have just tried your code and it works as you expect.

Please check the generated HTML code of your page, the

     <span>bar</span>

should be there.

Regards,
  Zemi

Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and <script type="text/ng-template">

Dejan Cabrilo
Zemi,

Thanks for the quick reply. I just figured out the problem was that I was using Thymeleaf with LEGACYHTML5 mode. Once I switched to HTML5 it started working.

Out of curiosity, why would it work in HTML5 and fail in LEGACYHTML5?

Thanks again!
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and <script type="text/ng-template">

Zemi
Administrator
The LEGACYHTML5 mode first tidies up all the HTML code.

I guess this process would remove the tags inside the script element.

Regards,
  Zemi

Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and <script type="text/ng-template">

Dejan Cabrilo
Thanks again!