带有双花括号的AngularJS-Twig冲突

如您所知，角形和细枝都有共同的控制结构-双花括号。如何更改Angular的默认值？

我知道我可以在Twig中做到这一点，但是在某些项目中，只有JS无法做到。

您可以使用interpolateProviderservice 更改开始和结束插值标签。一个方便的地方是在模块初始化时。

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

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

这个问题似乎已经解决，但是尚未提及的更优雅的解决方案是将花括号简单地括在树枝花括号之间的引号中，如下所示：

{{ '{{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 +带有MtHaml样式的Twig的AngularJS：

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

就像在有关Django和AngularJS的类似问题中提到的那样，更改默认符号（在Twig或AngularJS中）的技巧可能会与使用这些符号的第三方软件不兼容。因此，我在Google中找到了最好的建议：https : //groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle没有为词法分析定界符提供配置，因为更改它们会禁止您使用共享捆绑软件提供的任何模板（包括TwigBundle本身提供的异常模板）。

但是，你可以使用你的左右角模板的原始标签，以避免逃避所有的大括号的痛苦： http://twig.sensiolabs.org/doc/tags/raw.html -克里斯托夫| 斯托夫

标记已重命名为逐字

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

您可以使用\{{product.name}}来使表达式被Handlebars忽略，而由Angular使用。

这是最佳答案的汇编版本，也是逐字逐句的示例：

对于单次插入，请使用：

{{ '{{model}}' }}

或者如果您使用细枝变量

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

Verbatim非常优雅，对几个角度变量可读：

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

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

可以只将细枝模板标签与角度标签一起使用，如下所示：

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

在另一个类似的线程答案上发现了这个问题：symfony2应用程序上的Angularjs

另外，您可以更改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);

根据这篇文章，您应该能够做到这一点：

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

我喜欢@pabloRN，但我更喜欢使用span而不是p，因为对我来说p会在结果中添加行。

我将使用此：

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

我也将aText与光标放在双引号内一起使用，因此我不必一遍又一遍地重写整个内容。

您可以在树枝中创建一个函数来包围您的角度指令，例如，而不是去...

{{"angular"}}

你走 ...

{{angular_parser("angular stuff here output curlies around it")}}