AngularJS-Twig Konflikt mit doppelten geschweiften Klammern

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.

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

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

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

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

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

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>

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

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 sollten Sie in der Lage sein, dies folgendermaßen zu tun:

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

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.

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