Jak uniknąć nawiasów klamrowych w celu wyświetlenia na stronie podczas korzystania z AngularJS?

Question 1

Chcę, aby użytkownik zobaczył podwójne nawiasy klamrowe, ale Angular wiąże je automatycznie. Jest to odwrotny przypadek tego pytania, w którym chcą oni nie widzieć nawiasów klamrowych używanych do łączenia podczas ładowania strony.

Chcę, aby użytkownik zobaczył to:

My name is {{person.name}}.

Ale Angular zastępuje {{person.name}}wartość. Pomyślałem, że to może zadziałać, ale angular nadal zastępuje go wartością:

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

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

Question 2

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

Dokumentacja @ ngNonBindable

Question 3

Edycja: dodanie \ ukośnika w nawiasach kwadratowych wewnątrz cudzysłowów działa

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

to też ... omija interpretację kątową

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

to też ..

{{ person.name }<x>} 

{{ person.name }<!>}

Question 4

W naszym przypadku chcieliśmy umieścić nawiasy klamrowe w symbolu zastępczym, więc musiały pojawić się wewnątrz atrybutu HTML . Użyliśmy tego:

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

Jak widać, tworzymy ciąg z trzech mniejszych ciągów, aby rozdzielić nawiasy klamrowe.

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

Pozwala to uniknąć używania, ng-non-bindablewięc możemy nadal używać ng-atrybutów w innym miejscu elementu.

Question 5

Użyj ng-non-bindablew pojemniku, działa to na wszystkie elementy wewnątrz pojemnika.

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

Question 6

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

Question 7

Zaktualizowano dla Angular 9

Służy ngNonBindabledo unikania powiązania interpolacyjnego.

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

Question 8

Chciałem używać pojedynczych nawiasów w całym tekście, a powyższe rozwiązania nie działały. Tak więc chciałem polecić Angular.

Wersja kątowa: 5

Wymagany tekst: Nazywam się {person.name}.

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

Mam nadzieję, że to komuś pomoże.

Question 9

Z kompilatora Angular:

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

Więc w pierwotnym pytaniu - skończyłoby się:

My name is {{ '{' }}{{ '{' }}person.name{{ '}' }}{{ '}' }}

Answer 1

98

Chcę, aby użytkownik zobaczył podwójne nawiasy klamrowe, ale Angular wiąże je automatycznie. Jest to odwrotny przypadek tego pytania, w którym chcą oni nie widzieć nawiasów klamrowych używanych do łączenia podczas ładowania strony.

Chcę, aby użytkownik zobaczył to:

My name is {{person.name}}.

Ale Angular zastępuje {{person.name}}wartość. Pomyślałem, że to może zadziałać, ale angular nadal zastępuje go wartością:

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

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

angularjs Jason Goemaat
źródło

Jeśli chcesz w ogóle zastosować inny ogranicznik (taki jak [[ ]]): stackoverflow.com/questions/12923521/ ...

Thilo

2

Dzięki, widziałem to, ale chodzi o przykładową stronę pokazującą, jak działają nawiasy klamrowe, i chcę, aby przeglądanie źródła było w stanie wyglądać dokładnie tak, jak na stronie pokazującej próbkę, jeśli ma to sens.

Jason Goemaat

możliwy duplikat Zapobiegaj chwilowemu wyświetlaniu notacji z podwójnym nawiasem klamrowym przed skompilowaniem / interpolacją dokumentu przez angular.js

Maxime Lorant

1

@MaximeLorant To zupełnie inna kwestia związana z zapobieganiem chwilowemu wyświetlaniu nawiasów klamrowych podczas ładowania strony, to pytanie dotyczy ich wyświetlania nawet po załadowaniu strony i zapobiegania wiązaniu ich przez kąt.

Jason Goemaat

Answer 2

Jeśli chcesz w ogóle zastosować inny ogranicznik (taki jak [[ ]]): stackoverflow.com/questions/12923521/ ...

Thilo

Answer 3

2

Dzięki, widziałem to, ale chodzi o przykładową stronę pokazującą, jak działają nawiasy klamrowe, i chcę, aby przeglądanie źródła było w stanie wyglądać dokładnie tak, jak na stronie pokazującej próbkę, jeśli ma to sens.

Jason Goemaat

Answer 4

możliwy duplikat Zapobiegaj chwilowemu wyświetlaniu notacji z podwójnym nawiasem klamrowym przed skompilowaniem / interpolacją dokumentu przez angular.js

Maxime Lorant

Answer 5

1

@MaximeLorant To zupełnie inna kwestia związana z zapobieganiem chwilowemu wyświetlaniu nawiasów klamrowych podczas ładowania strony, to pytanie dotyczy ich wyświetlania nawet po załadowaniu strony i zapobiegania wiązaniu ich przez kąt.

Jason Goemaat

Answer 6

148

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

Dokumentacja @ ngNonBindable

Mike Pugh
źródło

6

Możesz także użyć <div> lub dowolnego tagu, po prostu dodaj ng-non-bindable

Mike Pugh

5

co, jeśli {{value}}znajduje się wewnątrz wartości tagu wejściowego?

Timo Huovinen

@TimoHuovinen, aby wyprowadzić nawiasy klamrowe w atrybucie HTML, zobacz moją odpowiedź .

joeytwiddle

@TimoHuovinen Możesz użyć ng-non-bindableelementu kontenera, możesz zobaczyć moją odpowiedź: stackoverflow.com/a/42511222/1407491

Nabi KAZ

Obecnie to nie działa; używając Angular 8. @joeytwiddle odpowiedział jednak.

JE Carter II

Answer 7

6

Możesz także użyć <div> lub dowolnego tagu, po prostu dodaj ng-non-bindable

Mike Pugh

Answer 8

5

co, jeśli {{value}}znajduje się wewnątrz wartości tagu wejściowego?

Timo Huovinen

Answer 9

@TimoHuovinen, aby wyprowadzić nawiasy klamrowe w atrybucie HTML, zobacz moją odpowiedź .

joeytwiddle

Answer 10

@TimoHuovinen Możesz użyć ng-non-bindableelementu kontenera, możesz zobaczyć moją odpowiedź: stackoverflow.com/a/42511222/1407491

Nabi KAZ

Answer 11

Obecnie to nie działa; używając Angular 8. @joeytwiddle odpowiedział jednak.

JE Carter II

Answer 12

29

Edycja: dodanie \ ukośnika w nawiasach kwadratowych wewnątrz cudzysłowów działa

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

to też ... omija interpretację kątową

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

to też ..

{{ person.name }<x>} 

{{ person.name }<!>}

bh_earth0
źródło

Daje miLexer Error

Jason Goemaat

1

{{'{{' asd '}}'}} co z jego

bh_earth0,

4

To późna odpowiedź na pytanie z zaakceptowaną odpowiedzią. Jeśli zdecydujesz się podać nową odpowiedź, powinieneś podjąć dodatkowe środki ostrożności, aby upewnić się, że rozwiązanie działa, i podać istotne powody, dla których ta odpowiedź jest preferowana od powszechnie akceptowanej odpowiedzi. To i tak nie odpowiada bezpośrednio na pytanie.

Claies,

Jak dla tego {{...}}.

ROMANIA_engineer,

Answer 13

Daje miLexer Error

Jason Goemaat

Answer 14

1

{{'{{' asd '}}'}} co z jego

bh_earth0,

Answer 15

4

To późna odpowiedź na pytanie z zaakceptowaną odpowiedzią. Jeśli zdecydujesz się podać nową odpowiedź, powinieneś podjąć dodatkowe środki ostrożności, aby upewnić się, że rozwiązanie działa, i podać istotne powody, dla których ta odpowiedź jest preferowana od powszechnie akceptowanej odpowiedzi. To i tak nie odpowiada bezpośrednio na pytanie.

Claies,

Answer 16

Jak dla tego {{...}}.

ROMANIA_engineer,

Answer 17

W naszym przypadku chcieliśmy umieścić nawiasy klamrowe w symbolu zastępczym, więc musiały pojawić się wewnątrz atrybutu HTML . Użyliśmy tego:

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

Jak widać, tworzymy ciąg z trzech mniejszych ciągów, aby rozdzielić nawiasy klamrowe.

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

Pozwala to uniknąć używania, ng-non-bindablewięc możemy nadal używać ng-atrybutów w innym miejscu elementu.

Answer 18

Działa (dopiero od kątowej 8).

JE Carter II

Answer 19

Użyj ng-non-bindablew pojemniku, działa to na wszystkie elementy wewnątrz pojemnika.

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

Answer 20

3

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

EscapeNetscape
źródło

Answer 21

1

Zaktualizowano dla Angular 9

Służy ngNonBindabledo unikania powiązania interpolacyjnego.

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

Matt
źródło

Answer 22

Chciałem używać pojedynczych nawiasów w całym tekście, a powyższe rozwiązania nie działały. Tak więc chciałem polecić Angular.

Wersja kątowa: 5

Wymagany tekst: Nazywam się {person.name}.

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

Mam nadzieję, że to komuś pomoże.

Answer 23

Z kompilatora Angular:

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

Więc w pierwotnym pytaniu - skończyłoby się:

My name is {{ '{' }}{{ '{' }}person.name{{ '}' }}{{ '}' }}

Jak uniknąć nawiasów klamrowych w celu wyświetlenia na stronie podczas korzystania z AngularJS?

Odpowiedzi: