AngularJS-Twig与双花括号冲突

Question

如您所知,角度和树枝都有共同的控制结构 - 双花括号.如何更改Angular的默认值？

我知道我可以在Twig中做到这一点,但在某些项目中我不能,只有JS.

Answer 1

您可以使用interpolateProvider服务更改开始和结束插值标签.一个方便的地方是模块初始化时间.

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

http://docs.angularjs.org/api/ng.$interpolateProvider

Answer 2

这个问题似乎得到了回答,但是一个没有被提及的更优雅的解决方案是简单地将花括号括在树枝花括号之间的引号中,如下所示:

{{ '{{myModelName}}' }}

如果您使用变量作为内容,请执行以下操作:

{{ '{{' ~ yourvariable ~ '}}' }}

您应该使用单引号,而不是双引号.双引号启用Twig的字符串插值,因此您必须更加小心内容,尤其是在使用表达式时.

如果您仍然讨厌看到所有这些花括号,您还可以创建一个简单的宏来自动执行该过程:

{% macro curly(contents) %}
   {{ '{{' ~ contents ~ '}}' }}
{% endmacro %}

将其另存为文件并将其导入模板.我正在使用ng这个名字,因为它短而甜.

{% import "forms.html" as ng %}

或者您可以将宏放在模板的顶部并将其导入为_self (请参阅此处):

{% import _self as ng %}

然后使用如下:

{{ ng.curly('myModelName') }}

这输出:

{{myModelName}}

......以及那些在Twig旁边使用MtHaml的人的后续行动.MtHaml允许以正常方式使用AngularJS curlies,因为可以访问任何Twig代码 - 而不是{{}}.例如:

纯HTML + AngularJS:

<tr ng-repeat="product in products">
   <td> {{ product.name }} </td>
</tr>

MtHaml + AngularJS:

%tr(ng-repeat="product in products")
   %td {{ product.name }}

MtHaml + AngularJS与MtHaml风格的树枝:

- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
   %td {{ product.name }}

Answer 3

正如在关于Django和AngularJS的类似问题中所提到的,更改默认符号(在Twig或AngularJS中)的技巧可能会与使用这些符号的第三方软件不兼容.所以我在谷歌找到了最好的建议:https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle不为词法分隔符提供配置,因为更改它们会禁止您使用共享包提供的任何模板(包括TwigBundle自身提供的异常模板).

但是,您可以在角度模板周围使用原始标记,以避免逃避所有花括号的痛苦:http: //twig.sensiolabs.org/doc/tags/raw.html - Christophe | STOF

标签已重命名为逐字

Answer 4

您可以使用过基于属性的指令<p ng-bind="yourText"></p>是一样的<p>{{yourText}}</p>

Answer 5

您可以使用\{{product.name}}Handlebars忽略表达式并由Angular使用.

Answer 6

这是最佳答案的编译版本和逐字块的示例:

对于单次插入,请使用:

{{ '{{model}}' }}

或者如果你使用树枝变量

{{ '{{' ~ twigVariableWitModelName ~ '}}' }}

逐字,对于几个角度变量非常优雅和可读:

<table ng-table>
    {% verbatim %}
        <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        </tr>
    {% endverbatim %}
</table>

Answer 7

如果您对更改现有角度语法的模板标签不感兴趣,则需要对现有角度模板进行一些令人困惑的重写.

可以使用带有角度标签的树枝模板标签,如下所示:

{% verbatim %}{{yourName}}{% endverbatim %}

在另一个类似的线程回答中找到了这个:symfony2应用程序上的Angularjs

Answer 8

或者,您可以更改Twig使用的字符.这由Twig_Lexer控制.

$twig = new Twig_Environment();

$lexer = new Twig_Lexer($twig, array(
    'tag_comment'   => array('[#', '#]'),
    'tag_block'     => array('[%', '%]'),
    'tag_variable'  => array('[[', ']]'),
    'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

Answer 9

根据这篇文章你应该能够这样做:

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