AngularJS-Twig em conflito com chaves duplas

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

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

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.

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")}}