Wie kann ich bei Verwendung von AngularJS geschweifte Klammern für die Anzeige auf der Seite umgehen?

97

Ich möchte, dass der Benutzer doppelte geschweifte Klammern sieht, aber Angular bindet sie automatisch. Dies ist der umgekehrte Fall dieser Frage, bei dem beim Laden der Seite keine geschweiften Klammern zum Binden angezeigt werden sollen.

Ich möchte, dass der Benutzer Folgendes sieht:

My name is {{person.name}}.

Aber Angular wird {{person.name}}durch den Wert ersetzt. Ich dachte, das könnte funktionieren, aber Angular ersetzt es immer noch durch den Wert:

&#123;&#123;person.name}}

Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

angularjs

— Jason Goemaat
quelle

Wenn Sie bereit sind, ein anderes Trennzeichen zu verwenden (z. B. [[ ]]): stackoverflow.com/questions/12923521/…

— Thilo

2

Danke, ich habe das gesehen, aber der springende Punkt ist wirklich eine Beispielseite, die zeigt, wie die geschweiften Klammern funktionieren, und ich möchte, dass die Quelle genau so aussieht, wie es auf der Seite ist, auf der das Beispiel angezeigt wird, wenn dies sinnvoll ist.

— Jason Goemaat

Mögliches Duplikat von Verhindert, dass die doppelte geschweifte Klammer kurz angezeigt wird, bevor angle.js das Dokument kompiliert / interpoliert

— Maxime Lorant

1

@MaximeLorant Dies ist ein völlig anderes Problem, um zu verhindern, dass geschweifte Klammern beim Laden der Seite vorübergehend angezeigt werden. Bei dieser Frage geht es darum, sie auch nach dem Laden der Seite anzuzeigen und zu verhindern, dass Winkel sie binden.

— Jason Goemaat

147

<code ng-non-bindable>{{person.name}}</code>

Dokumentation @ ngNonBindable

— Mike Pugh
quelle

6

Sie können auch <div> oder ein anderes Tag verwenden. Fügen Sie einfach ng-non-bindable hinzu

— Mike Pugh

5

Was ist, wenn sich das {{value}}innerhalb eines Eingabe-Tag-Werts befindet?

— Timo Huovinen

@ TimoHuovinen, um geschweifte Klammern in einem HTML- Attribut auszugeben, siehe meine Antwort .

— Joeytwiddle

@ TimoHuovinen Sie können ng-non-bindableim Containerelement verwenden, Sie können meine Antwort sehen: stackoverflow.com/a/42511222/1407491

— Nabi KAZ

Dies funktioniert derzeit nicht. mit Angular 8. @joeytwiddles Antwort tat es jedoch.

— JE Carter II

27

Bearbeiten: Das Hinzufügen eines Schrägstrichs in Klammern innerhalb der Anführungszeichen funktioniert

{{  "{{ person.name }\}"   }}

auch dies .. umgeht Winkelinterpretation

{{ person.name }<!---->}

Das auch ..

{{ person.name }<x>} 

{{ person.name }<!>}

— bh_earth0
quelle

Gibt mir einLexer Error

— Jason Goemaat

1

{{'{{' asd '}}'}} was ist mit seinem

— bh_earth0

4

Dies ist eine späte Antwort auf eine Frage mit einer akzeptierten Antwort. Wenn Sie sich für eine neue Antwort entscheiden, sollten Sie zusätzliche Vorkehrungen treffen, um sicherzustellen, dass die Lösung funktioniert, und überzeugende Gründe angeben, warum diese Antwort der allgemein akzeptierten Antwort vorgezogen wird. Auch dies beantwortet die Frage sowieso nicht direkt.

— Claies

Wie für diesen {{...}}.

— ROMANIA_engineer

11

In unserem Fall wollten wir geschweifte Klammern in einem Platzhalter darstellen, sodass sie in einem HTML- Attribut angezeigt werden mussten . Wir haben das benutzt:

 <input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>

Wie Sie sehen können, bauen wir eine Saite aus drei kleineren Saiten auf, um die geschweiften Klammern getrennt zu halten.

'Hello {' + '{person.name}' + '}!'

Dadurch wird die Verwendung vermieden, ng-non-bindablesodass wir weiterhin ng-Attribute an anderer Stelle im Element verwenden können.

— joeytwiddle
quelle

Funktioniert (erst ab Winkel 8).

— JE Carter II

3

Verwendung ng-non-bindableim Container, dies gilt für alle Elemente in diesem Container.

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>

— Nabi KAZ
quelle

3

<span>{{</span>{{variable.name}}<span>}}</span>

— EscapeNetscape
quelle

1

Aktualisiert für Angular 9

Verwenden Sie ngNonBindablediese Option , um die Interpolationsbindung zu umgehen.

<div ngNonBindable>
  My name is {{person.name}}
</div>

— Matt
quelle

1

Ich wollte einzelne Klammern im Text und die oben genannten Lösungen funktionierten bei mir nicht. Wollte also den Angular empfehlen.

Winkelversion: 5

Erforderlicher Text: Mein Name ist {person.name}.

<span>My name is {{'{'}}person.name{{'}'}}.</span>

Ich hoffe es hilft jemandem.

— bhavya_karia
quelle