djangoを備えたAngularjs-競合するテンプレートタグ

StackOverflow https://stackoverflow.com/questions/8302928

質問

私はdjangoでangularjsを使用したいのですが、どちらも使用します {{ }} テンプレートとしてタグとして。他のカスタムテンプレートタグを使用して2つのいずれかを変更する簡単な方法はありますか？

役に立ちましたか？

解決

Angular 1.0の場合、$ InterporateProvider APIを使用して、補間シンボルを構成する必要があります。 http://docs.angularjs.org/api/ng.$ interpolateProvider.

このようなことはトリックをするべきです：

myModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

2つのことに留意してください：

  • サーバー側とクライアント側のテンプレートを混合することはめったに良い考えではなく、注意して使用する必要があります。主な問題は次のとおりです。保守性（読み取りが難しい）とセキュリティ（二重補間は新しいセキュリティベクトルを暴露する可能性があります。たとえば、サーバーサイドとクライアントサイドのテンプレートを逃がしているときに安全である可能性があり、それらの組み合わせはそうではないかもしれません）。
  • 使用するサードパーティのディレクティブ（コンポーネント）の使用を開始した場合 {{ }} テンプレートでは、構成が破損します。 （保留中の修正)

最初の問題については何もできることは何もありませんが、人々に警告することを除いて、2番目の問題に対処する必要があります。

他のヒント

あなたは多分試すことができます 逐語的 Djangoテンプレートタグとこのように使用してください：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

{% verbatim %}
<div ng-app="">
    <p>10 is {{ 5 + 5 }}</p>
</div>
{% endverbatim %}

ページのセクションを適切に分離した場合、「生」タグスコープでAngularJSタグを簡単に使用できます。

Jinja2で

{% raw %}
    // here you can write angularjs template tags.
{% endraw %}

Djangoテンプレート（1.5以上）

{% verbatim %}    
    // here you can write angularjs template tags.
{% endverbatim %}

作成しました とても 2つを簡単に混ぜることができるdjango 'ng'のシンプルなフィルター：

foo.html：

...
<div>
  {{ django_context_var }}
  {{ 'angularScopeVar' | ng }}
  {{ 'angularScopeFunction()' | ng }}
</div>
...

ng フィルターは次のようになります：

from django import template
from django.utils import safestring

register = template.Library()


@register.filter(name='ng')
def Angularify(value):
  return safestring.mark_safe('{{%s}}' % value)

それで、私は今日、Angular IRCチャネルでいくつかの大きな助けを得ました。 Angularのテンプレートタグを非常に簡単に変更できることがわかります。以下の必要なスニペットは、角度を含む後に含める必要があります（与えられた例はそれらに表示されます メーリングリスト そして使用します (()) 新しいテンプレートタグとして、あなた自身の代わりに）：

angular.markup('(())', function(text, textNode, parentElement){
  if (parentElement[0].nodeName.toLowerCase() == 'script') return;
  text = text.replace(/\(\(/g,'{{').replace(/\)\)/g, '}}');
  textNode.text(text);
  return angular.markup('{{}}').call(this, text, textNode, parentElement);
});

angular.attrMarkup('(())', function(value, name, element){
    value = value.replace(/\(\(/g,'{{').replace(/\)\)/, '}}');
    element[0].setAttribute(name, value);
    return angular.attrMarkup('{{}}').call(this, value, name, element);
});

また、私は公開する今後の強化を指摘されました startSymbol と endSymbol 必要なタグに設定できるプロパティ。

私は、ダブルカンペレート（（））をテンプレートタグとして使用することに反対票を投じます。関数呼び出しが関係しない限り、それはうまく機能するかもしれませんが、次のことを試したとき

ng:disabled=(($invalidWidgets.visible()))

MacでFirefox（10.0.2）を使用すると、意図したロジックではなく、ひどく長いエラーが発生しました。 <[]>少なくとも今まで、私にとってはうまくいきました。

編集2012-03-29：$ invalidWidgetsは廃止されていることに注意してください。しかし、私はまだ二重ブレースよりも別のラッパーを使用しています。 0.10.7を超える角度バージョンの場合（私が推測する）、アプリ /モジュール定義でラッパーをはるかに簡単に変更できます。

angular.module('YourAppName', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<[');
    $interpolateProvider.endSymbol(']>');
});

APIドキュメント.

以下のコードが役立つことがわかりました。ここでコードを見つけました： http://djangosnippets.org/snippets/2787/

"""
filename: angularjs.py

Usage:
    {% ng Some.angular.scope.content %}

e.g.
    {% load angularjs %}
    <div ng-init="yourName = 'foobar'">
        <p>{% ng yourName %}</p>
    </div>
"""

from django import template

register = template.Library()

class AngularJS(template.Node):
    def __init__(self, bits):
        self.ng = bits

    def render(self, ctx):
        return "{{%s}}" % " ".join(self.ng[1:])

def do_angular(parser, token):
    bits = token.split_contents()
    return AngularJS(bits)

register.tag('ng', do_angular)

{{}}の代わりに、いつでもng-bindを使用できますhttp://docs.angularjs.org/api/ng/directive/ngbind

<span ng-bind="name"></span>

Django 1.5以下を使用している場合：

  {% verbatim %}
    {{if dying}}Still alive.{{/if}}
  {% endverbatim %}

AppengineでDjango 1.2にこだわっている場合、このようなVerbatimテンプレートコマンドでDjango構文を拡張します...

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

ファイルの使用で：

from google.appengine.ext.webapp import template
template.register_template_library('utilities.verbatim_template_tag')

ソース：http://bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-in.html

Djangoに出力を伝えることができます {{ と }}, 、および {% templatetag %} 鬼ごっこ。

たとえば、使用します {% templatetag openvariable %} 出力します {{.

Djangoタグ{{{}}と角度{{{}}の両方を使用するソリューションに固執します。

それは単に、AngularJSの動作を$ interporateProvider.startsymbol $ interprovedider.endsymbolを介して（前述のように）変化させることができるからです。標準のAngularJSタグ{{}}。

たとえば、見てください https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html.

サーバー側の補間を行うと、 それだけ これを行うための正しい方法はあります <>

$interpolateProvider.startSymbol('<{').endSymbol('}>');

それ以外はXSSベクトルです。

これは、Djangoによって脱出されない角度の区切り文字がユーザーが補間文字列に入力できるためです。誰かがユーザー名を「{{vyol_code}}」として設定した場合、 Angularは喜んでそれを実行します. 。使用する場合 ダジャンゴよりもキャラクターが逃げます, しかし、これは起こりません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top