197

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

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

4

11 回答 11

288

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

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

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

于 2012-12-02T17:34:13.537 回答
91

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

{{ '{{myModelName}}' }}

如果您对内容使用变量，请改为执行以下操作：

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

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

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

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

将其另存为文件并将其导入模板。我使用ng这个名字是因为它又短又甜。

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

或者您可以将宏放在模板的顶部并将其导入为 _self （请参见此处）：

{% import _self as ng %}

然后按如下方式使用它：

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

这输出：

{{myModelName}}

...以及对那些使用MtHaml和 Twig 的人的跟进。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 }}
于 2014-01-19T01:40:05.337 回答
37

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

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

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

标记已重命名为逐字

于 2013-02-06T00:43:14.903 回答
27

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

于 2013-09-05T20:56:55.107 回答
24

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

于 2014-03-18T20:37:51.353 回答
23

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

对于单次插入，请使用：

{{ '{{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>
于 2015-02-23T00:04:43.053 回答
19

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

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

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

在另一个类似的线程答案中找到了这个：Angularjs on a symfony2 application

于 2013-11-15T20:11:58.187 回答
18

或者，您可以更改 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);
于 2014-04-16T13:08:16.540 回答
17

根据这篇文章，您应该可以这样做：

angular.module('app', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }]);
于 2012-12-02T17:30:49.183 回答
2

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

我会用这个：

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

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

于 2014-11-28T13:14:30.567 回答
1

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

{{"angular"}}

你去 ...

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

于 2015-04-02T18:58:52.073 回答