AngularJS-Twig Konflikt mit doppelten geschweiften Klammern

198

Wie Sie wissen, haben sowohl Winkel als auch Zweig 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 JS.

Meliborn
quelle
2
Mögliches Duplikat des benutzerdefinierten Trennzeichens
pkozlowski.opensource
10
Eine andere zweigspezifische Lösung für den Schnurrbart-Wahnsinn ist die Verwendung des verbatimTags. Beispiel: Um{% verbatim %}{{ angular_var }}{% endverbatim %} Ihre Schnurrbärte für AngularJS zu erhalten: twig.sensiolabs.org/doc/tags/verbatim.html
Darragh Enright
Nicht für den Autor der Frage, sondern für zukünftige Leser: Wenn Sie nach einer Antwort auf diese Frage suchen, sollten Sie das Rendern von Vorlagen auf der Serverseite vermeiden, wenn Sie es sich leisten können (wenn sich Ihr Hauptinhalt in der authentifizierten Zone oder in Ihrer Hauptsuchmaschine befindet Als Verkehrsquelle dient Google (sie können JS SPA analysieren).
OZ_
1
@OZ_ Das Suchmaschinenargument gegen AngularJS und dergleichen wird bei Verwendung von Diensten wie prerender.io ziemlich überflüssig .
E. Sundin

Antworten:

287

Sie können die Start- und Endinterpolations-Tags mithilfe des interpolateProviderDienstes ändern . Ein geeigneter Ort hierfür ist die Modulinitialisierungszeit.

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

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

abhaga
quelle
5
Ich würde [[]] jedoch nicht verwenden. Es könnte in einigen Bindungen schlecht sein, wie dieser:[[myObject[myArray[index]]
Andrew Joslin
1
Wahr. Ich benutze {[{}]}mit Django, obwohl es etwas seltsam zu tippen ist. Ich habe die Antwort aktualisiert.
Abhaga
4
Vielen Dank! Stieß auf ein ähnliches Problem mit Jeykll / Liquid und Angular JS. Ich habe mich für {[und]} entschieden.
jfroom
7
Muss das Semikolon nach dem} in Zeile 3 nicht entfernt werden?
CashIsClay
Gibt es eine Möglichkeit, dies in Angular auf globaler Ebene zu tun? Unsere Website wird viele, viele Module auf vielen verschiedenen Seiten enthalten, und wir möchten nicht vergessen, dies zu tun.
theY4Kman
89

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 die geschweiften Klammern des Zweigs zu setzen, wie folgt:

{{ '{{myModelName}}' }}

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

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

Sie sollten einfache Anführungszeichen verwenden , keine doppelten Anführungszeichen. Doppelte Anführungszeichen ermöglichen die String-Interpolation durch Twig, sodass Sie mit dem Inhalt vorsichtiger umgehen müssen, insbesondere wenn Sie Ausdrücke verwenden.


Wenn Sie es immer noch hassen, all diese geschweiften Klammern zu sehen, können Sie auch ein einfaches Makro erstellen, um den Prozess zu automatisieren:

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

Speichern Sie es als Datei und importieren Sie es in Ihre Vorlage. Ich benutze ngfü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 importieren (siehe hier) :

{% import _self as ng %}

Verwenden Sie es dann 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 normale Verwendung von AngularJS-Locken, da auf jeden Twig-Code zugegriffen wird - und = anstelle von {{}}. Beispielsweise:

Einfaches 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 Zweig im MtHaml-Stil:

- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
   %td {{ product.name }}
robert.corlett
quelle
6
Es ist vielleicht nicht der angenehmste Weg, aber meiner Meinung nach ist es der einzige Weg, sich keine Sorgen über Kompatibilitätsprobleme zu machen. Ether Modify Angular oder Twig {{kann zu Kompatibilitätsproblemen oder schlechter Portabilität führen.
Léo Benoist

1
Die bereitgestellte Lösung fing erst an, für mich zu funktionieren, als ich dies tat, {{'{{contact.name}\}'}} das druckte, {{contact.name}}wie ich wollte
Timo Huovinen

37

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

TwigBundle bietet keine Konfiguration für die Lexer-Trennzeichen, da durch deren Änderung keine Vorlagen verwendet werden können, die von gemeinsam genutzten Bundles bereitgestellt werden (einschließlich der von TwigBundle selbst bereitgestellten Ausnahmevorlagen).

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

Tag wurde wörtlich umbenannt


6
Bitte beachten Sie, dass das Raw-Tag in "wörtlich" umbenannt wurde, um Verwechslungen mit dem Rohfilter von twig zu vermeiden.
Stedekay

3
Dies ist meiner Meinung nach der sauberste Weg.
Kemicofa Ghost

27

Sie können auch die Attribut-basierte Direktive verwenden, <p ng-bind="yourText"></p>die mit identisch ist<p>{{yourText}}</p>


4
Dies muss tatsächlich die bessere Lösung sein.
Alain Jacomet Forte

5
wie man es auf attr benutzt, wie <li id={{item.id}}></li>?
Gkiwi

Noch besser wäre es <p data-ng-bind="yourText"></p>, den HTML-Code gültig zu machen
Jean-Marc Zimmer

24

Sie können verwenden \{{product.name}}, um den Ausdruck von Lenker zu ignorieren und stattdessen von Angular zu verwenden.


Das war wirklich nützlich
Aidan

Gute Lösung - einfach den reservierten Zeichen entkommen, funktioniert auch im Lenker
ein Darren

22

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

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

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

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

Ah, das war der Lebensretter für mich. Ich konnte {{param}} nicht in Filter verwenden: {{{param}}: $ select.search} und Ihre Lösung hat es behoben. Danke
Balron
19

Wenn Sie nicht daran interessiert sind, die Vorlagen-Tags der vorhandenen Winkel-Syntax zu ändern, was ein verwirrendes Umschreiben Ihrer vorhandenen Winkel-Vorlagen erforderlich machen würde.

Man kann einfach die Zweigschablonen-Tags mit eckigen Tags wie folgt verwenden:

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

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

Chrisjlee
quelle
1
@ThomasReggi Das OP bittet um eine Lösung für Twig. Schauen Sie sich die anderen Antworten an, die auch für Liquid funktionieren können.
Noel Llevares
18

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);
Arnold Daniels
quelle
Sehr hilfreich. Vielen Dank.
Anos K. Mhazo
17

Laut diesem Beitrag sollten Sie in der Lage sein, dies folgendermaßen zu tun:

angular.module('app', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }]);
Olivier.Roger
quelle
2
Wo soll ich diese Codes ablegen? | Oh! Ich habe es verstanden, ich muss ng-app = app
zx1986
Ich habe gerade mit AngularJS und in Laravel 4 angefangen, das Framework geladen und dann {{2 + 2}} zur Ansicht hinzugefügt - überhaupt nichts anderes und es wurde mit 4 ausgewertet. Wo füge ich den Code ein, um dies in [[2+] zu ändern 2]]? Ich habe versucht, es zwischen Skript-Tags auf derselben Seite hinzuzufügen und ng-app = "myApp" zum enthaltenen div-Tag hinzuzufügen, aber es funktioniert nicht.
Perkin5
Es muss in Ihrem Javascript platziert werden, es werden dieselben Ortscontroller definiert. Ein funktionierendes Beispiel finden Sie in der Dokumentation ( docs.angularjs.org/api/ng.$interpolateProvider ) auf der Registerkarte script.js.
Olivier.Roger
2
Ein Wort der Vorsicht, ich habe die doppelten eckigen Klammern für Angular verwendet, aber ich bin gerade auf ein Problem mit dem Django Message-Framework gestoßen. Nachrichten erstellen ein Cookie, das [[]] enthält, und Angular versucht, es zu analysieren und erstickt dabei. Ich habe versucht, für Nachrichten in den Sitzungsspeicher zu wechseln, aber das gleiche Problem. Ich wechselte zu dreifachen eckigen Klammern.
Dustin
2

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

Ich werde dies verwenden:

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

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

Sifoo
quelle
eigentlich ist ng-bind = "" wichtig, du kannst jedes Tag verwenden, das du
magst
@wesamly Sie können ein beliebiges Tag verwenden, <span>wird jedoch für Inline-Text verwendet, wenn Sie andere Inhalte haben. Zum Beispiel:<h1>Welcome <span ng-bind="yourName"></span></h1>
Rybo111
1

Sie können eine Funktion in Zweig erstellen, um Ihre Winkelanweisungen zu umgeben, also anstatt ...

{{"angular"}}

du gehst ...

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

marcinzajkowski
quelle
Bitte blockiert der Benutzercode das Code-Snippet in Ihren Antworten.
β.εηοιτ.βε