Question

我有一个用FLASK，Jinja2模板开发的项目。它是一个简单的webapp，允许用户登录并查看他们的在线个人资料
- 目前我正在尝试通过为客户端添加AngularJS＆amp; BootStrap来改进项目，因为我想使用ngMessages和其他一些角度依赖项
- flask_wtf表单提交按钮将在＆lt; html ng-app＆gt;标签，但是当我把flask_wtf形式放在＆lt;中时，它不起作用。 html ng-app＆gt;标签
- 更新： 你好大卫，当我的问题无关时，这是一个重复的问题。请注意，我不是在询问如何修复分隔符表示法，而是询问如何在Jinja2中使用angularJS {{var}}。我想知道我是否可以在AngularJS中使用flask_wtf＆lt; html ng-app＆gt;标签。当我试图将flask_Wtf形式放在＆lt; html ng-app＆gt;标签，它不起作用，但它在标签外工作。

form.py

class LoginForm(Form):
   """
   For user to login.
   """
   username = StringField(u'User Name:',validators=[
         InputRequired(),
         Regexp(ConfigRegex.RE_LOGIN_ID, message=ConfigRegex.RE_DESC_LOGIN_ID)])

   passwd = PasswordField(u'Password:', validators=[
         InputRequired(),
         Regexp(ConfigRegex.RE_PASSWD, message=ConfigRegex.RE_DESC_PASSWD)])

   submit = SubmitField(u'Log sIn')

login.html with flask_wtf（提交按钮正在运行）

<form method="POST">
  {{ form.hidden_tag() }}{# Render any hidden fields, including the CSRF #}

  <div class="field">{{ form.username.label }} {{ form.username }}</div>
  {{ macros.show_field_errors(form.username.errors) }}

  <div class="field">{{ form.passwd.label }} {{ form.passwd }}</div>
  {{ macros.show_field_errors(form.passwd.errors) }}

  <div class="field">{{ form.submit }}</div>
</form>

在AngularJS中使用flask_wtf的login.html＆lt; html ng-app＆gt;标签（提交按钮不起作用）

<html ng-app="loginApp">
////////////////////////////////////////////////////
//test form with flask (inside ng-app not working)
////////////////////////////////////////////////////
<form method="POST">
  {{ form.hidden_tag() }}{# Render any hidden fields, including the CSRF #}

  <div class="field">{{ form.username.label }} {{ form.username }}</div>
  {{ macros.show_field_errors(form.username.errors) }}

  <div class="field">{{ form.passwd.label }} {{ form.passwd }}</div>
  {{ macros.show_field_errors(form.passwd.errors) }}

  <div class="field">{{ form.submit }}</div>
</form> 

///////////////// END //////////////////


<form name="editForm" method="post" id="login" class="form-signin" novalidate>
.....
.....
           <span ng-class="{ 'has-error': editForm.password.$touched && editForm.password.$invalid }">
            <div class="form-group input-group">
              <input class="form-control" placeholder="Password" name="password" type="password" name='password' ng-model="password" g-maxlength="20" required>
            </div>
            <div class="help-block" ng-messages="editForm.password.$error" ng-if="editForm.password.$touched">
             <p ng-message="required">Password is required</p>
             <p ng-message="maxlength">Password is too long</p>
           </div>
         </span>


         <button class="btn btn-lg btn-danger btn-block" type="submit" ng-disabled="!editForm.$valid">Login</button>

       </form>
</html>

Answer 1

如何在Flask [Jinja2]中使用AngularJS？

使用AngularJS在Jinja2中呈现页面的相同部分默认情况下效果不佳，因为它们都使用标记{{和}}来插入模板中的变量。因此，您的角度{{varX}}表达式将首先由Jinja2服务器呈现。

考虑在Jinja2中使用{% raw %}，因为它会跳过插值：

{% raw %}
    {{you can use your ng vars here}}
    {{varX}}             <--- Jinja2 won't interpolate this
{% endraw %}

或者您可以将AngularJS的标记更改为其他标记，例如{$和$}：

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

和

{$varX$} <--- Jinja2 won't interpolate,
              because Jinja2 looks for `{{` and `}}` by default.

可以在AngularJS ng-app中使用FLASK吗？

1 个答案: