webentwicklung-frage-antwort-db.com.de

AngularJS-Twig Konflikt mit doppelten geschweiften Klammern

Wie Sie wissen, haben sowohl angular als auch twig eine gemeinsame Steuerungskonstruktion - doppelte geschweifte Klammern. Wie kann ich den Standardwert von Angular ändern?

Ich weiß, dass ich es in Twig schaffen kann, aber in einigen Projekten kann ich es nicht, nur in JS.

197
Meliborn

Sie können die Start- und Endinterpolations-Tags mit dem Dienst interpolateProvider ändern. Ein geeigneter Ort dafür ist die Initialisierungszeit des Moduls.

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

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

286
abhaga

Diese Frage scheint beantwortet zu sein, aber eine elegantere Lösung, die nicht erwähnt wurde, besteht darin, die geschweiften Klammern einfach in Anführungszeichen zwischen den geschweiften Klammern twig === ===========================

{{ '{{myModelName}}' }}

Wenn Sie eine Variable für den Inhalt verwenden, gehen Sie stattdessen folgendermaßen vor:

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

Sie sollten einfache Anführungszeichen und keine doppelten Anführungszeichen verwenden. Doppelte Anführungszeichen ermöglichen die Interpolation von Zeichenfolgen mit Twig), sodass Sie vor allem bei der Verwendung von Ausdrücken mit dem Inhalt vorsichtiger umgehen müssen.


Wenn Sie all diese geschweiften Klammern immer noch nicht gern sehen, können Sie auch ein einfaches Makro erstellen, um den Vorgang zu automatisieren:

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

Speichern Sie es als Datei und importieren Sie es in Ihre Vorlage. Ich benutze ng für den Namen, weil er kurz und süß ist.

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

Oder Sie können das Makro oben in Ihre Vorlage einfügen und als _self (siehe hier) importieren:

{% import _self as ng %}

Dann benutze es wie folgt:

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

Dies gibt aus:

{{myModelName}}

... und ein Follow-up für diejenigen, die MtHaml neben Twig verwenden. MtHaml ermöglicht die Verwendung von AngularJS-Curlies auf normale Weise, da auf jeden Twig Code zugegriffen wird - und = anstelle von {{}}. Zum Beispiel:

Nur 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 mit MtHaml-artigem Zweig:

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

Wie in einer ähnlichen Frage zu Django und AngularJS) erwähnt, kann ein Trick mit sich ändernden Standardsymbolen (in Twig oder AngularJS)) zu Inkompatibilität mit Software von Drittanbietern führen Verwenden Sie diese Symbole. Also der beste Rat, den ich in Google gefunden habe: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle stellt keine Konfiguration für die Lexer-Trennzeichen bereit, da durch deren Änderung die Verwendung von Vorlagen verboten wird, die von gemeinsam genutzten Bundles bereitgestellt werden (einschließlich der von TwigBundle selbst bereitgestellten Ausnahmevorlagen).

Sie können jedoch das rohe Tag um Ihre angular Vorlagen verwenden, um zu vermeiden, dass alle geschweiften Klammern übersprungen werden: http://twig.sensiolabs.org/doc/tags/raw .html - Christophe | Stof

Tag wurde in wörtlich umbenannt

35
OZ_

Sie können auch die attributbasierte Direktive <p ng-bind="yourText"></p> Verwenden, die mit <p>{{yourText}}</p> Identisch ist.

27
pabloRN

Sie können \{{product.name}}, damit der Ausdruck von Handlebars ignoriert und stattdessen von Angular verwendet wird.

23
Nacho Coloma

Dies ist eine kompilierte Version der besten Antworten und ein Beispiel für wörtliche Blöcke:

Verwenden Sie für einzelne Einfügungen:

{{ '{{model}}' }}

oder wenn Sie eine twig Variable verwenden

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

Verbatim , ist sehr elegant und lesbar für mehrere angular Variablen:

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

Wenn Sie nicht daran interessiert sind, die Template-Tags der vorhandenen angular) - Syntax zu ändern, wäre ein verwirrendes Umschreiben Ihrer vorhandenen angular) - Vorlagen erforderlich.

Man kann einfach die twig template-Tags mit angular tags wie folgt verwenden:

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

Fand dies in einem anderen ähnlichen Thread Antwort : Angularjs in einer symfony2-Anwendung

18
chrisjlee

Alternativ können Sie die von Twig verwendeten Zeichen ändern. Dies wird vom Twig_Lexer gesteuert.

$twig = new Twig_Environment();

$lexer = new Twig_Lexer($twig, array(
    'tag_comment'   => array('[#', '#]'),
    'tag_block'     => array('[%', '%]'),
    'tag_variable'  => array('[[', ']]'),
    'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

Laut diesem Beitrag solltest du es so machen können:

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

Ich mag @pabloRN, aber ich würde es vorziehen, span anstelle von p zu verwenden, weil für mich p dem Ergebnis eine Zeile hinzufügt.

Ich werde dies verwenden:

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

Ich benutze auch aText mit dem Cursor im doppelten Anführungszeichen, damit ich das Ganze nicht immer wieder neu schreiben muss.

2
sifoo

Sie können eine Funktion in twig erstellen, um Ihre angular Direktiven zu umgeben, also wie anstatt ...

{{"angular"}}

du gehst ...

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

0
marcinzajkowski