AngularJS-Twig 与双花括号冲突

Question

如您所知，angular 和 twig 都有共同的控制结构——双花括号。如何更改 Angular 的默认值？

我知道我在 Twig 中可以做到，但在某些项目中我不能，只有 JS。

Answer 1

根据this post，您应该可以这样做：

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

Answer 2

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

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

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

Answer 3

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

TwigBundle 不提供词法分析器分隔符的配置 因为更改它们会禁止您使用由 共享包（包括由 TwigBundle 本身）。

但是，您可以在 Angular 模板周围使用原始标签 避免逃避所有花括号的痛苦： http://twig.sensiolabs.org/doc/tags/raw.html -- 克里斯托夫 |斯托夫

标签重命名为verbatim

Answer 4

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

Answer 5

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

可以只使用带有角标签的树枝模板标签，如下所示：

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

在另一个类似的帖子上找到这个answer:Angularjs on a symfony2 application

Answer 6

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

{{ '{{myModelName}}' }}

如果您对内容使用变量，请改为：

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

您应该使用单引号，而不是双引号。双引号支持 Twig 进行字符串插值，因此您必须更加小心内容，尤其是在使用表达式时。

---

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

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

将其保存为文件并将其导入您的模板。我使用ng 作为名称，因为它又短又甜。

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

或者您可以将宏放在模板顶部并将其导入为_self (see here)：

{% 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 风格的 Twig：

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

Answer 7

您可以使用\{{product.name}} 来获取被 Handlebars 忽略并由 Angular 使用的表达式。

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

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

我会用这个：

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

我还在双引号内使用带有光标的 aText，这样我就不必一遍又一遍地重写整个内容。

Answer 10

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

对于单次插入，请使用：

{{ '{{model}}' }}

或者如果你使用 twig 变量

{{ '{{' ~ 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>

Answer 11

您可以在 twig 中创建一个函数来围绕您的角度指令，所以喜欢而不是去...

{{"angular"}}

你去...

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