Django가 있는 AngularJS - 템플릿 태그가 충돌합니다.

Django가 있는 AngularJS - 템플릿 태그가 충돌합니다.

Angular를 사용하고 싶다JS는 Django를 사용하지만 둘 다{{ }}템플릿 태그로 지정합니다.둘 중 하나를 변경하여 다른 커스텀템플릿 태그를 사용할 수 있는 쉬운 방법이 있습니까?

Angular 1.0의 경우 $interpolateProvider apis를 사용하여 보간 기호(http://docs.angularjs.org/api/ng.$interpolateProvider)를 설정해야 합니다.

다음과 같은 방법으로 효과를 볼 수 있습니다.

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

다음 두 가지 사항에 유의하십시오.

• 서버측 템플릿과 클라이언트측 템플릿을 혼재시키는 것은 권장되지 않으므로 주의하여 사용해야 합니다.주요 문제는 유지보수성(읽기 어려운)과 보안(예를 들어 서버사이드와 클라이언트 사이드의 템플릿이 자체적으로 유출되는 등 이중 보간으로 인해 새로운 보안 벡터가 노출될 수 있음)입니다.
• 를 사용하기 하면, 「」(컴포넌트)를 사용합니다.{{ }}템플릿에서 설정이 깨집니다.(수정 보류 중)

첫 번째 문제는 사람들에게 경고하는 것 외에는 우리가 할 수 있는 일이 없지만, 두 번째 문제에 대처할 필요가 있습니다.

말 그대로 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 태그를 "raw" 태그 범위에서 쉽게 사용할 수 있습니다.

인진자2

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

장고 템플릿(1.5 이상)

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

우리는 Django 'ng'에서 두 가지를 쉽게 혼합할 수 있는 매우 간단한 필터를 만들었습니다.

foo.foo:

...
<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 include 뒤에 포함해야 합니다(예시는 메일링 리스트에 나타나며, 다음과 같습니다).(())새로운 템플릿태그로서 자신의 것을 대신합니다).

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()))

파이어폭스(10.0.2)를 Mac에서 사용하는 경우 의도한 로직 대신 엄청나게 긴 오류가 발생했습니다.<[]>은 적어도 지금까지는요.

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)

{{ }} http://docs.angularjs.org/api/ng/directive/ngBind 대신 언제든지 ng-module을 사용할 수 있습니다.

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

django 1.5 이후를 사용하는 경우:

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

앱 엔진에서 django 1.2를 사용할 수 없는 경우 다음과 같이 verbatim template 명령을 사용하여 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

장고에게 출력하라고 하면 됩니다.{{그리고.}}및 태그를 사용하여 예약된 다른 템플릿 문자열.

예를 들어,{% templatetag openvariable %}출력할 수 있다{{.

django tag {{}}과(와) angularjs {{}}을(를) 사용하는 솔루션과 말 그대로 templatetag를 함께 사용합니다.

이는 단순히 $interpolateProvider.startSymbol $interpolateProvider.endSymbol을 통해 angularjs 동작 방식을 변경할 수 있기 때문입니다.단, ui-bootstrap과 같은 다른 angularjs 컴포넌트를 사용하기 시작하면 템플릿 중 일부가 표준 anguljs 태그 {{}}로 이미 구축되어 있습니다.

예를 들면, https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html 를 참조해 주세요.

서버 측 보간 작업을 수행할 경우 올바른 방법은<>

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

그 외의 것은 XSS 벡터입니다.

이는 사용자가 Django에 의해 이스케이프되지 않은 Angular 딜리미터를 보간된 문자열에 입력할 수 있기 때문입니다.누군가 사용자 이름을 {devil_code}로 설정하면 Angular는 이를 기쁘게 실행합니다.하지만 장고가 탈출하는 것보다 더 많은 캐릭터를 사용한다면, 이런 일은 일어나지 않을 것이다.

언급URL : https://stackoverflow.com/questions/8302928/angularjs-with-django-conflicting-template-tags