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 (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风格的树枝：

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

Answer 3

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

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

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

标记已重命名为verbatim

Answer 4

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

相同

Answer 5

您可以使用\{{product.name}}来获取Handlebars忽略的表达式，而不是Angular使用的表达式。

Answer 6

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

对于单次插入，请使用：

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

Answer 7

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

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

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

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

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

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

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

Answer 10

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

我会用这个：

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

我还在双引号中使用带有光标的文本，所以我不必一遍又一遍地重写整个事情。

Answer 11

你可以用树枝创建一个函数来包围你的角度指令，所以不要再去......

{{"angular"}}

你去......

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

Answer 12

你可以在AngularJS表达式之前简单地加上'@'，例如：

@{{ app.property }}

通过这种方式，Twig将忽略此字符串，Angular最终可以使用双花括号表达式完成它们的工作。

AngularJS-Twig与双花括号冲突

12 个答案: