Thymeleaf + Boot + AngularJS 指令解析器错误

Posted 2023-02-26

【中文标题】Thymeleaf + Boot + AngularJS 指令解析器错误

【英文标题】：Thymeleaf + Boot + AngularJS directives parser error

【发布时间】：2014-06-30 05:31:28

【问题描述】：

这应该很容易，但我找不到任何解决方案。

我在 Jetty 上使用带有 Thymeleaf 的 Spring Boot 1.0.2 来支持我的 AngularJS 应用程序。但是使用属性指令时解析器会抛出异常。

pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.20</version>
</dependency>

Thymeleaf 配置

@Configuration
public class ThymeleafConfig 

    @Bean
    public ServletContextTemplateResolver templateResolver() 
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
        resolver.setPrefix("/templates/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("LEGACYHTML5");
        resolver.setCacheable(false);
        return resolver;
    

    @Bean
    public ResourceBundleMessageSource messageSource() 
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("messages");
        messageSource.setDefaultEncoding("UTF-8");

        return messageSource;
    

Thymeleaf 工作正常，但属性指令存在问题，例如这个 Bootstrap UI 示例：

<div class="btn-group" dropdown is-open="true">
    <button type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

我收到此错误

org.xml.sax.SAXParseException: Attribute name "dropdown" associated with an element type "div" must be followed by the ' = ' character.

我在哪里可以调整 Thymeleaf 以接受这些属性？

编辑

我已经为 LEGACYHTML5 添加了 nekoHTML 解析器，但仍然没有结果。

【问题讨论】：

我不是真正的引导专家，但“下拉”不是 CSS 类吗？

不，这是一个 AngularJS 指令，它创建指定的下拉菜单。

我也不是 Angular 用户，但我想知道为什么它需要您编写格式错误的 xml。也许dropdown="true" 会起作用？

尝试data-dropdown 而不是dropdown。它应该是有效的 HTML5 和 dropdown 不是但 data-* 属性是。 AngularJS 应该支持后者。

@Deinum，不起作用，因为这不是标准的 AngularJS 属性指令，而是 Boostrap UI 指令。 Dave Syer 是 AngularJS 的语法，您可以制作自己的自定义 html 标签，在页面加载后用另一个 html 替换。

【参考方案1】：

无需更改任何内容，只需使其与 XML 兼容：

<div class="btn-group" dropdown="dropdown" is-open="true">
    <button type="button" class="btn btn-primary dropdown-toggle">Button dropdown <span       class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

问候

【参考方案2】：

在 Spring Boot 中，

为 Thymeleaf 使用旧版 HTML5 模式，

在“application.properties”中添加以下属性：

spring.thymeleaf.mode=LEGACYHTML5

并添加以下依赖项

在您的“build.gradle”中（如果您使用 Gradle）：

编译("net.sourceforge.nekohtml:nekohtml:1.9.21")

足够了。

您可以找到如下工作示例：

https://github.com/izeye/samples-spring-boot-branches/tree/thymeleaf

以及相关帖子如下：

http://izeye.blogspot.kr/2015/02/orgxmlsaxsaxparseexception-attribute.html

【参考方案3】：

在 Spring Boot 中启用 LEGACYHTML5 的更简单方法（至少对于我检查的版本 1.1.3.RELEASE）是简​​单地添加属性

spring.thymeleaf.mode=LEGACYHTML5

在 Spring Boot 寻找属性的地方之一

（首先想到的是application.properties）。

Spring Boot 的 ThymeleafAutoConfiguration 将负责其余的工作

【参考方案4】：

改变你的

@Bean
public ServletContextTemplateResolver templateResolver()  ... 

与

@Bean
public ServletContextTemplateResolver defaultTemplateResolver()  ... 

（注意默认）。

在您的情况下，spring (boot) 没有使用您的 Thymeleaf 配置，因此您在解析非标准属性时遇到了这个“奇怪”的错误（因为默认解析器是 XHTML）。