Issue
How to access a $scope.list in html from angularjs?
jinja2.exceptions.UndefinedError: 'car' is undefined
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}
]
}
]
);
}()
);
index.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()
I run this application as python app.py
Error:
jinja2.exceptions.UndefinedError: 'car' is undefined
What is the way to access the list in html from angular?
Solution
You error Error: jinja2.exceptions.UndefinedError: 'car' is undefined is not related to JavaScript. The problem seems to be as follows - Jinja2 template renderer also relies on double curly braces same as AngularJS {{ your expression here }}.
There are several solutions that could be used to solve this
You may change the interpolate notation for Angular i.e.
angular.module('WordcountApp', []) .config(['$interpolateProvider', function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }]);So your javascript/html code should look as follows
(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>Also, I believe that a more simple way should work like
<ul ng-repeat = "car in cars" > <p> {{ '{{ car.make }}' }} </p> </ul>which will use Jinja2 templater first and the output for the raw HTML would be correct AngularJS syntax. But I'm not 100% sure about this way and cannot check it right now.
Also while researching your problem I've found one more solution which could be used for solving your problem. Flask-Triangle provides a filter angular to tell Jinja if the evaluation of an expression must be rendered as an Angular expression. The undefined variables are rendered as-is in the HTML output.
In this case your html part code should look as follows
<body ng-controller = "WordcountController"> <ul ng-repeat = "car in cars" > <p> {{car.make|angular}} </p> </ul> </body>You can read more about this solution
Answered By - Sergey Mell
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.