Question

我的python flask应用程序中有三个文件构建在角度js的前端。

app.py

    import json
    import flask
    import numpy as np


    app = flask.Flask(__name__)


    @app.route("/")
    def index():
        return flask.render_template("index.html")


    if __name__ == "__main__":
        import os

        port = 80

        # Open a web browser pointing at the app.
        os.system("open http://localhost:{0}".format(port))

        # Set up the development server on port 80.
        app.debug = True
        app.run(port=port)

的index.html

<!DOCTYPE html>
    <html ng-app="gemStore">
      <head>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
        <script type="text/javascript" src="static/app.js"></script>
      </head>

      <body ng-controller="StoreController as store">
            <div class="list-group-item">
                   <h3>{{store.product.name}} <em class="pull-right">25</em></h3>
            </div>
      </body>
    </html>

app.js

(function() {
      var app = angular.module('gemStore', []);

      app.controller('StoreController', function(){
                  this.product = gem;
              }
      );


      var gem =  {
                      name: "Chicken",
                      price: 123.11,
                      color: "White"
                  };

    })();

当我运行此应用程序时，以下行的存在会导致错误：

<h3>{{store.product.name}} <em class="pull-right">25</em></h3>

我说错了。 jinja2.exceptions.UndefinedError UndefinedError：'store'未定义

这很奇怪，因为如果我没有使用python flask服务器，相同的前端应用程序将正常运行。此外，我通过测试警报检查了html文件是否正确引用了app.js文件。

Answer 1

Flask使用Jinja2呈现HTML模板，与AngularJS一样，使用{{+}}表示通过render_template传递的变量。

在这种特殊情况下，您尝试访问AngularJS中的变量store.product.name。但是，由于Jinja2（即Flask）首先处理HTML，它会尝试将其视为传递给模板渲染器的Flask变量。

如果你希望HTML打印出{{store.product.name}}是AngularJS解析的变量，你需要告诉Jinja2：＆＃34;嘿，我不想要你将其解析为Flask变量。＆＃34;

有几种不同的方法可以做到这一点。

首先，您可以将{{`}}``添加为转义文本：

<h3>{{ '{{' }}store.product.name{{ '}}' }} <em class="pull-right">25</em></h3>

这会在字符串store.product.name周围添加{{和}}，并呈现为{{store.product.name}}

或者，您可以编写一个Jinja2过滤器，告诉它不解析变量并返回原始字符串。例如，Flask-Triangle是一个包含angularjs过滤器的Flask扩展：

http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html

然而，你自己可以很容易地写出来。

Answer 2

知道了。

答案在这里： AngularJS-Twig conflict with double curly braces

将app.js修改为

(function() {
  var app = angular.module('gemStore', []);

 app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
 }); // NEWLY ADDED

  app.controller('StoreController', function(){
              this.product = gem;
          }
  );


  var gem =
              {
                  name: "Chicken",
                  price: 123.11,
                  color: "White"
              }
  ;

})();

将index.html修改为：

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="static/app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
        <div class="list-group-item">
               <h3>{[{store.product.name}]} <em class="pull-right">25</em></h3>
        </div>
  </body>
</html>

Python Flask + Angular Error：'StoreController Undefined'

2 个答案: