Como você sabe, tanto o angular quanto o galho têm construção de controle comum - chaves duplas. Como posso alterar o valor padrão de Angular?
Eu sei que posso fazer isso no Twig, mas em alguns projetos não posso, apenas JS.
Você pode alterar as tags de interpolação inicial e final usando o interpolateProvider
serviço. Um local conveniente para isso é no momento da inicialização do módulo.
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
https://docs.angularjs.org/api/ng/provider/$interpolateProvider
[[myObject[myArray[index]]
{[{}]}
com o Django, embora seja um pouco estranho digitar. Eu atualizei a resposta.
Essa pergunta parece respondida, mas uma solução mais elegante que não foi mencionada é simplesmente colocar os chavetas entre aspas entre as chaves, assim:
{{ '{{myModelName}}' }}
Se você estiver usando uma variável para o conteúdo, faça o seguinte:
{{ '{{' ~ yourvariable ~ '}}' }}
Você deve usar aspas simples , não aspas duplas. As aspas duplas ativam a interpolação de string pelo Twig, portanto, você deve ter mais cuidado com o conteúdo, especialmente se estiver usando expressões.
Se você ainda detesta ver todas essas chaves, também pode criar uma macro simples para automatizar o processo:
{% macro curly(contents) %}
{{ '{{' ~ contents ~ '}}' }}
{% endmacro %}
Salve-o como um arquivo e importe-o para o seu modelo. Estou usando ng
o nome porque é curto e doce.
{% import "forms.html" as ng %}
Ou você pode colocar a macro na parte superior do seu modelo e importá-la como _self (veja aqui) :
{% import _self as ng %}
Em seguida, use-o da seguinte maneira:
{{ ng.curly('myModelName') }}
Isso gera:
{{myModelName}}
... e um acompanhamento para aqueles que usam MtHaml ao lado de Twig. O MtHaml permite o uso de curvas de AngularJS da maneira normal, porque qualquer código Twig é acessado - e = em vez de {{}}. Por exemplo:
HTML simples + 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 com o galho no estilo MtHaml:
- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
%td {{ product.name }}
{{'{{contact.name}\}'}}
que imprime {{contact.name}}
como eu queria
Como mencionado na pergunta semelhante sobre Django e AngularJS, o truque para alterar símbolos padrão (no Twig ou AngularJS) pode fornecer incompatibilidade com software de terceiros, que usará esses símbolos. Então, o melhor conselho que encontrei no google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ
O TwigBundle não fornece uma configuração para os delimitadores do lexer, pois sua alteração proibiria o uso de modelos fornecidos por pacotes compartilhados (incluindo os modelos de exceção fornecidos pelo próprio TwigBundle).
No entanto, você pode usar a tag raw em torno de seus modelos angulares para evitar a dor de escapar de todos os chavetas: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof
A tag foi renomeada para literalmente
Você também pode usar a diretiva baseada em atributo <p ng-bind="yourText"></p>
é a mesma que<p>{{yourText}}</p>
<li id={{item.id}}></li>
?
<p data-ng-bind="yourText"></p>
para tornar o HTML válida
Você pode usar \{{product.name}}
para obter a expressão ignorada pelo guidão e usada pelo Angular.
Esta é uma versão compilada das melhores respostas e um exemplo para blocos textuais:
Para inserções únicas, use:
{{ '{{model}}' }}
ou se você usar uma variável galho
{{ '{{' ~ twigVariableWitModelName ~ '}}' }}
Verbatim , é muito elegante e legível para várias variáveis angulares:
<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>
Se você não estiver interessado em alterar as tags de modelo da sintaxe angular existente, isso exigiria alguma reescrita confusa dos seus modelos angulares existentes.
Pode-se apenas usar as tags de modelo de galho com tags angulares da seguinte forma:
{% verbatim %}{{yourName}}{% endverbatim %}
Encontrei isso em outra resposta semelhante : Angularjs em um aplicativo symfony2
Como alternativa, você pode alterar os caracteres usados pelo Twig. Isso é controlado pelo 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);
De acordo com este post, você poderá fazer o seguinte:
angular.module('app', [])
.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
Eu gosto do @pabloRN, mas eu preferiria usar span em vez de p, porque para mim, p adiciona linha ao resultado.
Vou usar isso:
<span ng-bind="yourName"></span>
Também uso aText com o cursor entre aspas duplas, para não precisar reescrever a coisa toda repetidamente.
<span>
é usado para texto embutido quando tiver outro conteúdo. Por exemplo:<h1>Welcome <span ng-bind="yourName"></span></h1>
Você pode criar uma função em galho para cercar suas diretivas angulares, assim como ao invés de ir ...
{{"angular"}}
Você vai ...
{{angular_parser("angular stuff here output curlies around it")}}
verbatim
tag; por exemplo:{% verbatim %}{{ angular_var }}{% endverbatim %}
para preservar seus bigodes para AngularJS: twig.sensiolabs.org/doc/tags/verbatim.html