Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

公開日 : 2018-01-21

FlaskとAngular JSで{{}}がかぶってエラーが起こるときの対処法

このエントリーをはてなブックマークに追加

FlaskとAngular JSを利用している際に、エラーが起こる


FlaskでAngular JSを利用して以下のようなHTMLコードを書いているときに、エラーが表示される。


<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
  <h1>リダイレクトURL</h1>
  <p>OAuth Providerで登録した、Client IDと、リダイレクトURLを入力してください。</p>
  <form>
    <label for="client_id">クライアントID</label>
    <input type="textfield" name="client_id" id="client_id" ng-model="client_id" placeholder="クライアントID"></input>
    <label for="redirect_uri">リダイレクトURL</input>
    <input type="textfield" name="redirect_uri" id="redirect_uri" ng-model="redirect_uri" placeholder="リダイレクトURL"></input>
    <label for="textfield">スコープ</label>
    <input type="textfield" name="scope" id="scope" ng-model="scope" placeholder="scope"></input>
  </form>
  <p>生成されたURL</p>
    <a href="https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=263680507619-6sm2e6jv584ilmd7h6jrn5dstk6magke.apps.googleusercontent.com&redirect_uri=http://127.0.0.1:5000/callback.html/&scope=https://www.googleapis.com/auth/calendar
">これじゃ</a>
    <p>{{client_id + redirect_uri + scope}} </p>
  {% if result %}
  <h1>アクセストークン</h1>
    <form method="post">
      <label>Access Token</label>
      <blockquote>{{ result }}</blockquote>
      <input type="textfield" name="access_token" value="{{result}}">
      <input type="submit"></input>
  </form>
  {% endif %}

  {% if schedule %}
  <h1>スケジュール一覧</h1>
  <blockquote>{{ schedule }}</blockquote>
  {% endif %}

<!-- javascript-->
<script>
</script>
</body>
</html>


jinja2.exceptions.UndefinedError
jinja2.exceptions.UndefinedError: 'client_id' is undefined




原因

FlaskもAngular JSも、変数を挿入するときに、{{}}を利用するので、
Angular JSで挿入した変数がFlaskのPythonの変数だと認識されてしまう模様。

解決策

さきほどの

{{client_id + redirect_uri + scope}}

を、以下のように変換することで回避できた。

{{"{{client_id + redirect_uri + scope}}"}}

ログ




スポンサーリンク