Python Flask + Angular Error: 'StoreController Undefined'

Python Flask + Angular Error: 'StoreController Undefined'

我的 python flask 应用程序中有三个文件是基于 angular 前端 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 未定义错误：'store' 未定义

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

Flask 使用 Jinja2 渲染 HTML 模板，它类似于 AngularJS，使用 {{ + }} 表示通过 render_template.

传递的变量

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

如果你想让 HTML 打印出来 {{store.product.name}} 是一个由 AngularJS 解析的变量，你需要告诉 Jinja2："Hey, I don't want you to parse this as a Flask variable."

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

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

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

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

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

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

不过自己写一个也很容易。

知道了。

答案在这里： 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>