Python Flask + Angular 错误：“StoreController 未定义”[重复]答案

【问题标题】：Python Flask + Angular Error: 'StoreController Undefined' [duplicate]Python Flask + Angular 错误：“StoreController 未定义”[重复]
【发布时间】：2015-03-01 04:00:36
【问题描述】：

我的 python 烧瓶应用程序中有三个文件，这些文件是基于 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 UndefinedError: 'store' 未定义

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

【问题讨论】：

flask.render_template("index.html") 你也需要传递参数
对于您在模板中使用的 store.product.name
我是烧瓶和角度的新手。您能否明确告诉我哪个文件中的哪一行需要从什么更改为什么？如果您这样做，请将其作为答案发布。也会帮助其他人。

标签： javascript python angularjs flask

【解决方案1】：

知道了。

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

【讨论】：

【解决方案2】：

Flask 使用 Jinja2 渲染 HTML 模板，它和 AngularJS 一样，使用 {{ + }} 表示通过render_template 传递的变量。

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

如果您希望将带有{{store.product.name}} 的 HTML 打印为 AngularJS 解析的变量，您需要告诉 Jinja2：“嘿，我不希望您将其解析为 Flask 变量。”

有几种不同的方法。

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

<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

但是你自己也可以很容易地写出来。

【讨论】：

非常感谢。这非常有帮助。但是，当我尝试导入 flask.ext.triangle 时，我得到一个错误，它不存在： ImportError: No module named flask.ext.triangle 我找不到任何资源来下载三角形。
您可以通过 pip 安装或手动下载它。请参阅 flask-triangle 文档网站上的 installation 说明。
这个包和你分享的不一样。它们的名称相同并且做类似的事情，但文档有所不同：flask-triangle.readthedocs.org/en/latest/… 对于这个包，flask.ext.triangle 存在但 flask.ext.triangle.Triangle 不存在。这个包的包含角度标签的方式非常冗长，影响了视图的简洁性。