AngularJS-Twig与双曲花括号冲突

如你所知，angular形和树枝都有共同的控制结构 – 双曲花括号。 我如何改变Angular的默认值？

我知道我可以在枝条上做，但是在一些项目中，我不能，只有JS。

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

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

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

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

 {{ '{{myModelName}}' }}

如果您使用的是内容的variables，请改为： 

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

你应该使用单引号 ，而不是双引号。 双引号启用Twig的string插值，所以你必须更加小心的内容，特别是如果你使用expression式。

如果你仍然不喜欢看到所有的花括号，你也可以创build一个简单的macros来自动完成这个过程： 

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

将其另存为一个文件并将其导入到您的模板中。 我用这个名字是因为它短而甜。 

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

或者你可以把macros放在你的模板的顶部，并将其作为_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 }}

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

TwigBundle没有为词法分隔符提供configuration，因为更改它们将禁止使用共享包提供的任何模板（包括由TwigBundle本身提供的exception模板）。

但是，您可以在angular模板周围使用原始标记，以避免转义所有大括号的痛苦： http : //twig.sensiolabs.org/doc/tags/raw.html – Christophe | STOF

标签被改名为逐字

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

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

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

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

如果您不想更改现有angular度语法的模板标签，那么需要对现有的angular度模板进行一些令人困惑的重写。

人们可以使用带有angular标签的树枝模板标签，如下所示： 

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

在另一个类似的线程上find这个答案 ： 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);

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

对于单次插入，请使用： 

 {{ '{{model}}' }}

或者如果你使用一个树枝variables 

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

逐字 ，是非常优雅和可读的几个angular度variables： 

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

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

我会用这个： 

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

我也用双引号内的光标使用aText，所以我不必一遍又一遍地重写整个事情。

你可以创build一个函数在树枝周围的angular度指令，所以喜欢，而不是去…

{{"angular"}}

你走 …

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

你可以简单地在你的AngularJSexpression式之前放一个'@'，比如： 

 @{{ app.property }}

这样Twig就会忽略这个string，Angular最终可以用双花括号expression式来完成他们的工作。

Interesting Posts