programing

AngularJS를 사용할 때 페이지에 표시하기 위해 중괄호를 어떻게 이스케이프합니까?

nasanasas 2020. 9. 5. 10:02
반응형

AngularJS를 사용할 때 페이지에 표시하기 위해 중괄호를 어떻게 이스케이프합니까?


사용자가 이중 중괄호를 보길 원하지만 Angular는 자동으로 바인딩합니다. 이것은 페이지가로드 될 때 바인딩에 사용되는 중괄호를 보지 않으려 이 질문 의 반대 사례입니다 .

사용자가 이것을 보길 바랍니다.

My name is {{person.name}}.

그러나 Angular는 {{person.name}}값으로 대체 됩니다. 나는 이것이 효과가 있다고 생각했지만 angular는 여전히 그것을 값으로 대체합니다.

{{person.name}}

플 런커 : http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ


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

문서 @ ngNonBindable


편집 : 따옴표 안에 대괄호 사이에 \ 슬래시 추가

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

이것도 .. 패스 각도 해석

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

이것도 ..

{{ person.name }<x>} 

{{ person.name }<!>}

우리의 경우 자리 표시 자에 중괄호를 표시하고 싶었 기 때문에 HTML 속성 안에 나타나야했습니다 . 우리는 이것을 사용했습니다.

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

보시다시피 중괄호를 분리하기 위해 세 개의 작은 문자열로 문자열을 구성하고 있습니다.

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

이렇게하면 요소의 다른 위치에서 속성을 ng-non-bindable계속 사용할 수 있도록 사용을 피할 수 있습니다 ng-.


ng-non-bindable컨테이너에서 사용하면 여기 컨테이너 내부의 모든 요소에 효과적입니다.

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

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

참고 URL : https://stackoverflow.com/questions/16868024/how-do-i-escape-curly-braces-for-display-on-page-when-using-angularjs

반응형