是否可以在AngularJS ngapp<html ngapp>内使用Flask？

2024-09-25 08:30:48 发布

您现在位置：Python中文网/ 问答频道 /正文
897 3

  • 我有一个项目是用FLASK，Jinja2模板开发的。这是一个简单的webapp，允许用户登录并查看他们的在线配置文件
    • 目前，我正试图通过为客户端添加AngularJS&BootStrap来改进项目，因为我想使用ngMessages和其他一些角度依赖关系
    • flask_wtf form submit按钮在<；html ng app>；标记外有效，但当我将flask_wtf form放入<；html ng app>；标记内时，它不起作用
    • 更新：您好，我的问题与此无关，这怎么会是重复的问题。请注意，我不是在问如何修复分隔符符号，也不是询问如何在Jinja2中使用angularJS{{var}}。我想知道是否可以在AngularJS<；html ng app>；标记中使用flask_wtf。当我试图将flask_Wtf表单放入<；html ng app>；标记内时，它不起作用，但它在标记之外有效。

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 (submit button is working)

^{pr2}$

login.html with flask_wtf inside AngularJS < html ng-app> tag (submit button not working)

<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>

Tags： 标记ltgtdivformappflaskfield
1条回答
网友
1楼 · 发布于 2024-09-25 08:30:48

How to use AngularJS inside Flask [Jinja2]?

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

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

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

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

^{pr2}$

以及：

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

相关问题 更多 >

    编程相关推荐