Ответ 1
<code ng-non-bindable>{{person.name}}</code>
Документация @http://docs.angularjs.org/api/ng.directive:ngNonBindable
Я хочу, чтобы пользователь видел двойные фигурные скобки, но Angular связывает их автоматически. Это противоположный случай этого вопроса, где они не хотят видеть фигурные скобки, используемые для привязки при загрузке страницы.
Я хочу, чтобы пользователь увидел это:
My name is {{person.name}}.
Но Angular заменяет {{person.name}}
на значение. Я думал, что это может сработать, но Angular все еще заменяет его значением:
{{person.name}}
Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ
<code ng-non-bindable>{{person.name}}</code>
Документация @http://docs.angularjs.org/api/ng.directive:ngNonBindable
Изменить: добавление\слэша между скобками внутри кавычек
{{ "{{ person.name }\}" }}
это тоже.. проходами angular интерпретация
{{ person.name }<!---->}
это тоже..
{{ person.name }<x>}
{{ person.name }<!>}
В нашем случае мы хотели представить фигурные скобки в заполнителе, поэтому они должны появиться внутри атрибута HTML. Мы использовали это:
<input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>
Как вы можете видеть, мы создаем строку из трех меньших строк, чтобы сохранить фигурные скобки раздельными.
'Hello {' + '{person.name}' + '}!'
Это позволяет избежать использования ng-non-bindable
, поэтому мы можем продолжать использовать атрибуты ng-
в другом месте элемента.
<span>{{</span>{{variable.name}}<span>}}</span>
Используйте ng-non-bindable
в контейнере, это действует на весь контейнер внутри контейнера.
<div ng-non-bindable>
<span>{{person.name}}</span>
<img src="#" alt="{{person.name}}">
<input placeholder="{{person.name}}">
</div>