Flask Jinja2 模板语法与 AngularJS 冲突(jinja2.exceptions.UndefinedE

如何从angularjs访问html中的$scope.list？

jinja2.exceptions.undefined错误："car"未定义

主.js

(function () 
{
'use strict';
angular.module('WordcountApp', [])    

.controller('WordcountController', ['$scope', 
function($scope) 
{
$scope.some = 'jjj'

console.log( "in WordcountController " , $scope.some)

$scope.cars = [
{make: 'Mazda', model: 'Miata', year: 2001},
{make: 'Toyota', model: 'Prius', year: 2013},
{make: 'Tesla', model: 'S', year: 2015},
{make: 'BMW', model: '325i', year: 2012}
]
}
]
);
}()
);

索引.html

<!DOCTYPE html>
<html ng-app = "WordcountApp" >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>
<script src = "static/main.js" > </script>
</head>

<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<p> {{ car.make }} </p>
</ul>
</body>
</html>

app.py

from flask import Flask 
from flask import render_template   
from flask import request           
app = Flask( __name__ )
displayText = 'Default text from Python'
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
@app.route("/writeOutput", methods=['POST'])
def writeOutput():
global displayText

print("request.get_json():- ", request.get_json())

displayText = request.get_json()['myOutput']['myText']

print ("from POST " , displayText)
return displayText

@app.route("/displayPreviousText", methods=['GET'])
def displayPreviousText():
global displayText
return displayText 
if __name__ == "__main__":
app.run()

我以python app.py运行此应用程序

错误：jinja2.exceptions.UndefinedError: 'car' is undefined

从 angular 访问 html 中的列表的方法是什么？

你错误Error: jinja2.exceptions.UndefinedError: 'car' is undefined与 JavaScript 无关。问题似乎如下 -Jinja2 模板渲染器也依赖于与 AngularJS{{ your expression here }}相同的双花括号。

有几种解决方案可用于解决此问题

您可以更改 Angular 的插值符号，即

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

所以你的javascript/html代码应该如下所示

(function () 
{
'use strict';
angular.module('WordcountApp', [])
// Setting up new interpolation delimiter which does not conflict with Jinja2
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}])
.controller('WordcountController', ['$scope',  function($scope) {
$scope.some = 'jjj'

console.log( "in WordcountController " , $scope.some)

$scope.cars = [
{make: 'Mazda', model: 'Miata', year: 2001},
{make: 'Toyota', model: 'Prius', year: 2013},
{make: 'Tesla', model: 'S', year: 2015},
{make: 'BMW', model: '325i', year: 2012}
]                                         
}])
}()
);

<!DOCTYPE html>
<html ng-app = "WordcountApp" >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>
<script src = "static/main.js" > </script>
</head>
<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<!-- Utilizing new interpolation delimiter -->
<p> [[ car.make ]] </p>
</ul>
</body>
</html>

另外，我相信一种更简单的方法应该像
```
<ul ng-repeat = "car in cars" >
<p> {{ '{{ car.make }}' }} </p>
</ul>
```
它将首先使用 Jinja2 模板器，原始 HTML 的输出将是正确的 AngularJS 语法。但我不是 100% 确定这种方式，现在无法检查。
此外，在研究您的问题时，我发现了另一个可用于解决您的问题的解决方案。Flask-Triangle 提供了一个过滤器角度，用于告诉 Jinja 表达式的计算是否必须呈现为 Angular 表达式。未定义的变量在 HTML 输出中按原样呈现。

在这种情况下，您的 html 部件代码应如下所示
```
<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<p> {{car.make|angular}} </p>
</ul>
</body>
```
您可以阅读有关此解决方案的更多信息
- 闪光三角深入教程 -- 金贾中的 AngularJS 模板

发生这种情况是因为烧瓶语法与角度冲突。

所以对 Python 代码的更改：

import os
from flask import Flask 
from flask import render_template
from flask import send_file, make_response, abort  
from flask import request           
app = Flask( __name__ )
displayText = 'Default text from Python'
@app.route('/', methods=['GET', 'POST'])
def index():
	return make_response(open('index.html').read())
@app.route("/writeOutput", methods=['POST'])
def writeOutput():
global displayText
print("request.get_json():- ", request.get_json())
displayText = request.get_json()['myOutput']['myText']
print ("from POST " , displayText)
return displayText
@app.route("/displayPreviousText", methods=['GET'])
def displayPreviousText():
global displayText
return displayText 
if __name__ == "__main__":
app.run()

返回make_response(open('index.html'(.read(((

而不是

render_template("索引.html"(

这将解决问题。

另一种方法是使用Angular的部分。

如何从angularjs访问html中的$scope.list？

相关内容

最新更新

热门标签：