307

Django で AngularJS を使用したいのですが、どちらも{{ }}テンプレート タグとして使用しています。2 つのうちの 1 つを他のカスタム テンプレート タグを使用するように変更する簡単な方法はありますか?

4

12 に答える 12

303

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

このような何かがうまくいくはずです：

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

次の 2 つの点に注意してください。

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

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

于 2012-06-19T19:55:54.040 に答える
126

逐語的な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 %}

于 2012-05-30T08:30:07.620 に答える
31

Django 'ng' で非常に単純なフィルターを作成し、2 つのフィルターを簡単に組み合わせることができるようにしました。

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)
于 2012-08-24T01:01:31.210 に答える
27

そのため、今日はAngularIRCチャネルで大きな助けを得ました。Angularのテンプレートタグは非常に簡単に変更できることがわかりました。以下の必要なスニペットは、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。

于 2011-12-10T01:51:43.403 に答える
18

テンプレートタグとして二重括弧 (()) を使用することに反対票を投じます。関数呼び出しが含まれていない限りうまくいくかもしれませんが、次のことを試してみると

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 ドキュメント.

于 2012-03-07T20:26:27.283 に答える
16

以下のコードが役に立ちました。ここでコードを見つけました：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)
于 2012-11-11T12:34:54.957 に答える
12

django 1.5以降を使用する場合：

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

appengineでdjango1.2を使用している場合は、次のような逐語的なテンプレートコマンドを使用して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

于 2013-02-04T14:16:00.157 に答える
7

タグを使用して、 Django に{{や}}、およびその他の予約済みテンプレート文字列を出力するように指示できます{% templatetag %}。

たとえば、を使用すると、{% templatetag openvariable %}が出力されます{{。

于 2011-11-29T02:26:58.523 に答える
3

django タグ {{}} と angularjs {{}} の両方をそのままのセクションまたはテンプレートタグで使用するソリューションに固執します。

これは単純に、$interpolateProvider.startSymbol $interpolateProvider.endSymbol を介して angularjs の動作方法を (前述のように) 変更できるためですが、ui-bootstrap などの他の angularjs コンポーネントの使用を開始すると、一部のテンプレートが既にビルドされていることがわかります。標準の angularjs タグ {{ }} を使用します。

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

于 2013-06-29T20:42:15.613 に答える
0

サーバー側で補間を行う場合、これを行う唯一の正しい方法は<>

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

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

これは、Django によってエスケープされていない Angular 区切り文字をユーザーが補間文字列に入力できるためです。誰かが自分のユーザー名を「{{evil_code}}」に設定すると、Angular は喜んでそれを実行します。ただし、 Django がエスケープするよりも文字を使用すると、これは起こりません。

于 2016-02-21T17:49:40.420 に答える