文章/答案/技术大牛

发布

社区首页 >问答首页 >可以在AngularJS ng-app <html ng-app>内使用烧瓶吗？

问可以在AngularJS ng-app <html ng-app>内使用烧瓶吗？
EN

Stack Overflow用户

提问于 2016-10-09 09:24:25

回答 1查看 473关注 0票数 0

我有一个项目是用烧瓶开发的，Jinja2模板。这是一个简单的webapp，允许用户登录并查看他们的在线配置文件。
- 目前，我正试图通过为客户端添加AngularJS&引导程序来改进该项目，因为我希望使用ngMessages和其他一些角度依赖项。
- flask_wtf表单提交按钮将在< html ng-app>标记外工作，但当我将flask_wtf表单放在< html ng-app>标记中时，它将无法工作。
- 更新:当我的问题与此无关时， Hello，这怎么会是一个重复的问题？请注意，我不是问如何修复分隔符符号，也不是问如何在Jinja2中使用Jinja2{var}。我想知道是否可以在flask_wtf < html ng-app>标记中使用AngularJS。当我试图将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与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>

login.html中包含flask_wtf的AngularJS < html ng-app>标记(提交按钮不起作用)

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

flask-wtforms

python

angularjs

flask

jinja2

回答 1

Stack Overflow用户

发布于 2016-10-09 09:37:20

如何在AngularJS内使用Jinja2？

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

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

{% 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.

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39942002

复制

相似问题

问可以在AngularJS ng-app <html ng-app>内使用烧瓶吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在AngularJS ng-app <html ng-app>内使用烧瓶吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在AngularJS ng-app <html ng-app>内使用烧瓶吗？
EN