Comment résoudre les conflits de portée variable entre Jinja2 et AngularJS

AngularJS et Jinja2 ont une spécification de syntaxe en HTML qui entoure la portée de la variable entre crochets doubles ondulés {{...}}. Par conséquent, si vous souhaitez écrire AngularJS dans Jinja2 utilisé dans le framework Python, l'écriture de la portée de la variable AngularJS en HTML sera en conflit et la portée de la variable AngularJS sera invalidée.

J'ai trouvé un moyen de changer la portée variable derimita ({{...}}) du côté AngularJS dans l'entrée de naoiwata, mais Jinja2 Je ne savais pas comment changer de côté, alors je l'ai recherché.

... et concluez.

Aux premières préférences (http://jinja.pocoo.org/docs/dev/api/#high-level-api) Il semble que vous devriez changer ** variable_start_string ** et ** variable_end_string **.

J'ai donc écrit un script qui utilise le moteur de template de Jinja2 à partir du framework webapp2 de GAE.

index.py


import os
import webapp2
import jinja2

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__))
	,extensions=['jinja2.ext.autoescape']
	,variable_start_string='[['
	,variable_end_string=']]'
   ,autoescape=True)

class MainPage(webapp2.RequestHandler):

    def get(self):
        template_values = {
            'test': 'hello Jinja2'
        }

        template = JINJA_ENVIRONMENT.get_template('index.html')
        self.response.write(template.render(template_values))
        
app = webapp2.WSGIApplication([('/', MainPage)],
                              debug=True)

index.html


<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="mainCtrl">
      <p>{{test}}</p>
      <p>[[test]]</p>
    </div>
  </body>

</html>

script.js


var myModule = angular.module("MyApp", []);
myModule.controller('mainCtrl',['$scope', function($scope){
  $scope.test = "hello angularjs";
}]);

Si tout se passe bien, vous verrez * hello angularjs * et * hello Jinja2 * sur votre navigateur.

Téléchargez sur GAE et vous pourrez utiliser Angularjs sur appspot.com.

Recommended Posts

Comment résoudre les conflits de portée variable entre Jinja2 et AngularJS
Comment basculer entre les shells Linux et Mac
Comment utiliser argparse et la différence entre optparse
[Python] Comment définir des noms de variables dynamiquement et comparer la vitesse
Comment résoudre la protection CSRF lors de l'utilisation d'AngularJS avec Django
Comment installer et utiliser Tesseract-OCR
Comment installer et configurer Blackbird
Comment utiliser .bash_profile et .bashrc
Comment installer et utiliser Graphviz
Résoudre des puzzles et 15 puzzles
tentative d'importation relative au-delà du package de niveau supérieur et comment résoudre en cas de colère
Comment empaqueter et distribuer des scripts Python
Comment diviser et enregistrer un DataFrame
Comment installer et utiliser pandas_datareader [Python]
python: Comment utiliser les locals () et globals ()
[Python] Comment calculer MAE et RMSE
Comment utiliser le zip Python et énumérer
Comment utiliser is et == en Python
Comment utiliser les pandas Timestamp et date_range
Comment installer le tissu et comment l'utiliser
Résoudre les conflits de modèles Angural JS et Django
Comment écrire des commentaires pydoc et multi-lignes
[Note] Que faire si la bibliothèque Qt entre en conflit entre pyqt et opencv