javascript - Python Flask + Angular 错误 : 'StoreController Undefined'

标签 javascript python angularjs flask

<分区>

我的 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 UndefinedError: 'store' 未定义

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

最佳答案

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

但是你可以很容易地自己写一个。

关于javascript - Python Flask + Angular 错误 : 'StoreController Undefined' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27748633/

相关文章:

angularjs - 使用 Angular.js 从 Web 服务获取数据

angularjs - 设置第三方 Node.js 身份验证服务器

javascript - 用于按源顺序选择 *所有* 元素、文本节点和注释节点的 XPath 表达式

javascript - doc.fromHTML 不是函数 jsPDF

javascript - Onenote API,从 JavaScript 进行 PATCH 时出现奇怪的行为

python - 值错误: Unknown metric function when using custom metric in Keras

javascript - Google Linechart 未在 Google Map InfoWindow 内显示 y 轴标签或图例标签

Python 诱变剂未正确保存

python - 从字典中删除重复的 Pandas 数据框

javascript - 每个 ng-repeat 嵌套唯一的 ng-model