머리말
AngularJS의 힘 중 하나는 강력한 데이터 양방향 바인딩 기능입니다. 우리가 자주 사용하는 두 가지는 NG 바인드와 NG 모델입니다.
그러나 프로젝트 에서이 상황에 직면 할 것입니다. 백그라운드에서 반환 된 데이터에는 다양한 HTML 태그가 포함되어 있습니다.
좋다:
$ scope.currentwork.description = "안녕하세요, <br> <b> 오늘 어디로 가고 있습니까? </b>"
우리는 NG-Bind-HTML과 같은 지침을 사용하여 바인딩하지만 결과는 우리가 원하는 것이 아닙니다.
그게 다야
안녕하세요, 오늘 우리는 어디로 가고 있습니까?
무엇을해야합니까?
Angular 버전 1.2의 경우 $ SCE 서비스를 사용하여 문제를 해결해야합니다. 소위 SCE는 "엄격한 상황에 맞는 탈출"의 약어입니다. 중국어로 번역 된 것은 "엄격한 컨텍스트 모드"이며 안전한 바인딩으로 이해할 수도 있습니다.
그것을 사용하는 방법을 봅시다.
컨트롤러 코드 :
$ http.get ( '/api/work/get? workid =' + $ loureparams.workid) .success (function (work) {$ scope.currentwork = work;});HTML 코드 :
<p> {{currentwork.description}} </p> 우리가 반환하는 컨텐츠에는 일련의 HTML 태그가 포함되어 있습니다. 결과는 기사의 시작 부분에서 말한대로 표시됩니다. 현재 우리는 안전하게 묶어달라고 말해야합니다. $ sce.trustAsHtml() 사용하여 수행 할 수 있습니다. 이 방법은 값을 특권 수락으로 변환하고 "NG-BIND-HTML"을 안전하게 사용합니다. 따라서 컨트롤러에 $ SCE 서비스를 소개해야합니다.
컨트롤러 ( 'TransferWorkStep2', [ '$ scope', '$ http', '$ lourteparams', '$ sce', 함수 ($ http, $ rouneparams, $ sce) {$ http.get ( '/api/work/workid =' + $ trouteparams.works (function (work) {works (work). 작업; $ scope.currentwork.description = $ sce.trustashtml ($ rootscope.currentwork.description);});HTML 코드 :
<p ng-bind-html = "currentwork.description"> </p>
이 결과는 페이지에 완벽하게 제시됩니다.
안녕하세요 오늘 우리는 어디로 가고 있습니까?
우리는 또한 이렇게 사용할 수 있고, 필터에 캡슐화하고 언제든지 템플릿에서 호출 할 수 있습니다.
app.filter ( 'to_trusted', [ '$ sce', function ($ sce) {return function (text) {return $ sce.trustashtml (text);};}]);HTML 코드 :
<p ng-bind-html = "currentwork.description | to_trusted"> </p>
요약
위의 모든 것은 AngularJS의 NG-Bind-HTML 지침 및 $ SCE 서비스에 관한 것입니다. 나는 그것이 당신이 공부하거나 일하는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.