[javascript] Django가있는 AngularJS-템플릿 태그 충돌
Django와 함께 AngularJS를 사용하고 싶지만 둘 다 {{ }}템플릿 태그로 사용 합니다. 다른 맞춤 템플릿 태그를 사용하기 위해 두 가지 중 하나를 쉽게 변경할 수 있습니까?
답변
Angular 1.0의 경우 $ interpolateProvider API를 사용하여 보간 기호를 구성해야합니다 ( http://docs.angularjs.org/api/ng.$interpolateProvider) .
이와 같은 것이 트릭을 수행해야합니다.
myModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});다음 두 가지를 명심하십시오.
- 서버 측 템플릿과 클라이언트 측 템플릿을 혼합하는 것은 좋은 생각이 아니며주의해서 사용해야합니다. 주요 문제는 유지 관리 성 (읽기 어려운) 및 보안 (이중 보간으로 인해 새로운 보안 벡터가 노출 될 수 있음)입니다.
{{ }}템플릿에서 사용하는 타사 지시문 (구성 요소)을 사용하기 시작하면 구성이 중단됩니다. ( 수정 보류 중 )
경고 문제를 제외하고 첫 번째 문제에 대해 할 수있는 일은 없지만 두 번째 문제를 해결해야합니다.
답변
당신은 어쩌면 시도 할 수 있습니다 그대로 장고 템플릿 태그와 같이 사용 :
<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 %}장고 템플릿 (1.5 이상)
{% verbatim %}
// here you can write angularjs template tags.
{% endverbatim %}답변
우리는 만든 아주 쉽게 두 혼합 할 수 있습니다 장고 ‘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)