AngularJS 브라우저 이스케이프 문자 금지

Question

코드를 강조하는 지시문을 만들었지 만 브라우저에서 강조 표시하기 전에 해당 코드를 수정하고있는 것처럼 보입니다.

다음과 같은 현상이 발생합니다.

나는 my-compile이라는 지시어를 가지고 있는데, 이는 기본적으로 전달 된 값을 요소의 innerHTML에 넣고 $compile을 실행합니다.

예 :

<span my-compile="details"></span> 

그리고 세부 사항은 것 같은 뭔가 :

here are some details and here's a <code lang="java">first = temp & 0xFF &amp;</code> 

여기에 중요한 지시어 코드 (이 링크 기능에)입니다 : 그래서

element.html(details); $compile(element.children())(scope); 

가 $compile은 <code> 지시어를보고 코드에 건네줍니다. 제외하고, 지시어, 여기에 문제의의 <code> 지시어는 내용을 얻기 위해 element.html()을 수행하고이 반환됩니다

first = temp & 0xFF & 

문제는 첫째 & 이스케이프되지 않았기 때문에 코드가, 지금은 잘못된 것입니다.

<code> 지시어를 비슷한 방식으로 계속 사용할 수 있지만 & 부호가 그대로 유지됩니다 (>와 < 표지판도 함께 발생한다고 가정).

내 유일한 아이디어는 조회 서비스 였지만 다소 지저분하지만 두 번째로 브라우저의 DOM에 도달하면 내 유일한 옵션이지만 이스케이프 처리 된 &은 두 번 이스케이프 처리되지 않습니다.

나는 또한 Angular/jQuery sanitization 것으로 생각하면 element[0].innerHTML을 사용해 보았지만 실제로는 그렇지 않습니다.

Answer 1

문제는 DOM에 처음으로 HTML을 추가했을 때 element.html(details); 브라우저가 html로 구문 분석 (btw - 잘못된 이스케이프 수정, 누락 된 닫기 태그 추가 등)하고 나중에 액세스하려고 할 때 구문 분석 도중 모든 수정 사항이 HTML로 처리됩니다. 당신이 그것을 해결할 수있는 방법을

유일한 방법 - element.text()로, (당신이 first = temp & 0xFF & 것 텍스트 first = temp & 0xFF & 인코딩 된 버전을 필요로하는 경우 제공 예를 들어)가 제대로 텍스트 개체와 같은 코드의 컨텐츠를 인코딩하여 액세스를하지만 당신 code을에 element.html()로 지령.