javascript vue冲突 - 带有Django的AngularJS-冲突的模板标签




flask开发 vue模板引擎 (12)

我想在Django中使用AngularJS,但他们都使用{{ }}作为模板标签。 有没有简单的方法来改变其中一个使用其他自定义模板标签?


Answers

所以我今天在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);
});

另外,我还指出了一个即将到来的增强功能,它会公开startSymbolendSymbol属性, endSymbol属性可以设置为您想要的任何标签。


你可以尝试verbatim 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 %}


我反对使用双括号(())作为模板标签。 只要没有涉及函数调用,但在尝试以下操作时它可能会正常工作

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

与Firefox(10.0.2)在Mac上我得到了一个非常长的错误,而不是预期的逻辑。 至少到目前为止,我的工作进展顺利。

编辑2012-03-29:请注意,$ invalidWidgets已弃用。 不过,我仍然使用另一个包装比双括号。 对于任何高于0.10.7的角度版本(我猜)你可以在你的应用/模块定义中更容易地改变包装:

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

API文档


您可以通过使用{% templatetag %}标记来告诉Django输出{{}}以及其他保留的模板字符串。

例如,使用{% templatetag openvariable %}会输出{{


如果您正确地分隔了页面的各个部分,那么您可以在“原始”标签范围内轻松使用angularjs标签。

在jinja2

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

在Django模板(1.5以上)

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


我发现下面的代码很有用。 我在这里找到了代码: http://djangosnippets.org/snippets/2787/ : 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)

对于Angular 1.0,您应该使用$ interpolateProvider apis来配置插值符号: http://docs.angularjs.org/api/ng.$interpolateProvider : http://docs.angularjs.org/api/ng.$interpolateProvider

像这样的应该做的诀窍:

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

请记住两件事:

  • 混合服务器端和客户端模板很少是一个好主意,应谨慎使用。 主要问题是:可维护性(难以阅读)和安全性(双重内插可能会暴露一个新的安全向量 - 例如,当逃脱服务器端和客户端模板本身可能是安全的,它们的组合可能不会)。
  • 如果您开始使用在其模板中使用{{ }}的第三方指令(组件),那么您的配置将会破坏它们。 ( 修复未决

虽然对于第一个问题我们无能为力,除了警告人,我们确实需要解决第二个问题。


如果您执行任何服务器端插值,则唯一正确的方法是使用<>

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

其他任何东西都是XSS矢量。

这是因为任何没有被Django转义的角度分隔符都可以被用户输入到插入的字符串中; 如果有人将他们的用户名设置为“{{evil_code}}”, Angular会很高兴地运行它 。 但是,如果您使用的字符不是Django ,则不会发生这种情况。


我会坚持使用django标记{{}}以及angularjs {{}}与逐字节或templatetag的解决方案。

这仅仅是因为你可以通过$ interpolateProvider.startSymbol $ interpolateProvider.endSymbol改变angularjs的工作方式(如上所述),但是如果你开始使用其他angularjs组件如ui-bootstrap,你会发现一些模板已经建立了使用标准的angularjs标签{{}}。

例如,查看https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html


对于AngularJS v1.3.3,你应该像这样定义你自己的模板标签

AngularJS模块

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

网页

<a>{$ variable $}</a> 

我不太清楚你在问什么,但也许这可以提供帮助:

window.onload = function(){
    // Code. . .

}

要么:

window.onload = main;

function main(){
    // Code. . .

}






javascript django django-templates angularjs