使用 Flask/Jinja 渲染未定义的角度变量答案

【问题标题】：Angular Variables rendering undefined with Flask/Jinja使用 Flask/Jinja 渲染未定义的角度变量
【发布时间】：2017-04-26 01:07:44
【问题描述】：

似乎没有原因，我的角度 $scope 变量没有在浏览器中呈现。在我今天创建此页面之前，我的整个项目一直运行良好。所有其他页面仍按预期工作。我已经使用以下代码删除了所有代码，只删除了变量本身，并且它仍然呈现为 [undefined]。

我正在使用 python/flask 通过 jinja 模板引擎为应用程序提供服务，因此更改了 angular 的插值字符，因此它们不会与 jinja 中的相同字符冲突：

var zues = angular.module('zues', []);
zues.config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('{{[');
    $interpolateProvider.endSymbol(']}}');
}]);

控制器：

zues.controller('test', ['$scope', '$http', function($scope, $http){
    $scope.test123 = "testing123";
}]);

HTML：

<body ng-app="zues" ng-controller="test">

{{[ test123 ]}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="/static/assets/js/zues.js"></script>
<script src="/static/assets/js/Controllers/test.js"></script>

python/flask 路由：

from flask import Flask, render_template
import flask
application = Flask(__name__)
@application.route("/test")
def test():
    return render_template('test.html')
if __name__ == "__main__":
    application.run(host='127.0.0.1', reloader_type='stat', debug=True)

这在浏览器中呈现为：

[未定义]

我希望它会呈现：

测试123

我只是忽略了任何简单的事情吗？

【问题讨论】：

角码方面没有挑战。由于路由看起来有些问题...plunker:plnkr.co/edit/sYKKMARS3ytTL9NN4Fqx?p=preview
是的，这很奇怪，路由没有比我提供的更基本，它适用于我的所有其他路由。我什至把它剥离出来，完全作为它自己的应用程序运行，并清除了我所有的浏览器历史记录/确保没有缓存问题，而且我仍然不确定。我完全感到困惑。

标签： python angularjs flask jinja2

【解决方案1】：

我想通了。我为 angular 选择的插值字符与 Jinja 默认使用的字符密切相关。 Jinja 使用 {{[ test123 ]}} 并将方括号解释为纯文本，然后尝试在我的 python 脚本中找到一个不存在的变量 test123。

这似乎并没有影响项目的其余部分，因为我在项目其余部分的 html 模板中使用的角度变量总是绑定到其他东西，因此被摘要循环监视，而在这种情况下它只会被插值一次。

我将插值字符更改为 {[{ test123 }]}，这样 Jinja 就不会捕捉到它，只有 angular 会捕捉到它。

【讨论】：

【解决方案2】：

一些快速的改变应该会有所帮助。

1) 摆脱插值提供程序。 如果您完成下面的 2 和 3，您将不需要此代码。

2) 关闭控制器定义时去掉右括号]

您的：}]）；
我的：});

3) 在花括号集合之前和 ' }}

之后添加 {{ '

示例/ {{ '{{someVariable + "" + anotherVariable}}' }}

【讨论】：