Question

I'm in trouble using together Thymeleaf and AngularJS. I try to sidenav menu with angular and I'm following this tutorial. I did same on the link but Thymeleaf throws this exception:

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

Here is the html:

<!DOCTYPE html>
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>

  <script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <script type="text/javascript" src="webjars/angularjs/1.5.5/angular.js"></script>
  <script type="text/javascript" src="webjars/angularjs/1.5.5/angular-route.js"></script>
  <script type="text/javascript" src="webjars/angularjs/1.5.5/angular-resource.js"></script>
  <script type="text/javascript" src="webjars/angularjs/1.5.5/angular-animate.js"></script>
  <script type="text/javascript" src="webjars/angularjs/1.5.5/angular-aria.js"></script>
  <script type="text/javascript" src="webjars/angular-material/1.1.0/angular-material.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/tokenInterceptorService.js"></script>
  <script type="text/javascript" src="js/navigation.js"></script>
  <script type="text/javascript" src="js/sidenav.js"></script>

  <title>Title</title>
</head>

<body ng-controller="navigation">
<div ng-controller="SideNavCtrl" layout="column" style="height: 500px;" data-ng-cloak="">

  <section layout="row" flex>

    <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">

      <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools">Disabled Backdrop</h1>
      </md-toolbar>

      <md-content layout-margin>
        <p>
          This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
        </p>
        <md-button ng-click="toggleLeft()" class="md-accent">
          Close this Sidenav
        </md-button>
      </md-content>

    </md-sidenav>

    <md-content flex layout-padding>

      <div layout="column" layout-align="top center">
        <p>
          Developers can also disable the backdrop of the sidenav.<br/>
          This will disable the functionality to click outside to close the sidenav.
        </p>

        <div>
          <md-button ng-click="toggleLeft()" class="md-raised">
            Toggle Sidenav
          </md-button>
        </div>

      </div>

    </md-content>

  </section>

</div>
</html>

What is the problem? Does Theymeleaf want a parameter like flex="..."?

Answer 1

是的，通常会指定类似的属性：flex="flex"。

thymeleaf throws an exeption implement angularjs flex in section

1 个答案: