时间戳

首页 > 解决方案 > Flask Jinja2 模板语法与 AngularJS 冲突 (jinja2.exceptions.UndefinedError:)

javascript - Flask Jinja2 模板语法与 AngularJS 冲突 (jinja2.exceptions.UndefinedError:)

问题描述

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

jinja2.exceptions.UndefinedError: 'car' 未定义

main.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>

应用程序.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

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

标签： javascriptpythonhtmlangularjsjinja2

解决方案

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

有几种解决方案可以用来解决这个问题

  1. 您可以更改 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>

  2. 另外，我相信更简单的方法应该像

    <ul ng-repeat = "car in cars" >
    <p> {{ '{{ car.make }}' }} </p>
</ul>

    它将首先使用 Jinja2 模板，原始 HTML 的输出将是正确的 AngularJS 语法。但我不是 100% 确定这种方式，现在无法检查。

  3. 此外，在研究您的问题时，我发现了另一种可用于解决您的问题的解决方案。Flask-Triangle 提供了一个过滤器 angular 来告诉 Jinja 表达式的求值是否必须呈现为 Angular 表达式。未定义的变量在 HTML 输出中按原样呈现。

    在这种情况下，您的 html 部分代码应如下所示

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

    您可以阅读有关此解决方案的更多信息

推荐阅读