คำนำ
หนึ่งในพลังของ AngularJS คือคุณลักษณะการผูกมัดแบบสองทิศทางที่ทรงพลัง สองสิ่งที่เรามักใช้คือ ng-bind และ ng-model สำหรับรูปแบบ
แต่ในโครงการของเราเราจะพบกับสถานการณ์นี้ข้อมูลที่ส่งคืนในพื้นหลังมีแท็ก HTML ต่างๆ
ชอบ:
$ scope.currentwork.description = "สวัสดี, <br> <b> วันนี้เราจะไปที่ไหน </b>"
เราใช้คำแนะนำเช่น NG-BIND-HTML เพื่อผูก แต่ผลลัพธ์ไม่ใช่สิ่งที่เราต้องการ
นั่นคือแค่นั้น
สวัสดีวันนี้เราจะไปไหน?
จะทำอย่างไร?
สำหรับ Angular เวอร์ชัน 1.2 เราต้องใช้บริการ $ SCE เพื่อแก้ปัญหาของเรา SCE ที่เรียกว่าเป็นตัวย่อของ "การหลบหนีตามบริบทที่เข้มงวด" แปลเป็นภาษาจีนคือ "โหมดบริบทที่เข้มงวด" และยังสามารถเข้าใจได้ว่าเป็นการผูกมัดที่ปลอดภัย
มาดูกันว่าจะใช้อย่างไร
รหัสคอนโทรลเลอร์:
$ http.get ('/api/work/get? workid =' + $ routeparams.workid) .success (ฟังก์ชั่น (งาน) {$ scope.currentwork = work;});รหัส HTML:
<p> {{currentwork.description}} </p> เนื้อหาที่เราส่งคืนมีชุดของแท็ก HTML ผลลัพธ์จะแสดงตามที่เราได้กล่าวไว้ในตอนต้นของบทความ ในเวลานี้เราต้องบอกให้ผูกอย่างปลอดภัย สามารถทำได้โดยใช้ $ sce.trustAsHtml() วิธีนี้จะแปลงค่าเป็นการยอมรับที่ได้รับการยกเว้นและใช้ "NG-BIND-HTML" อย่างปลอดภัย ดังนั้นเราต้องแนะนำบริการ $ SCE ในคอนโทรลเลอร์ของเรา
คอนโทรลเลอร์ ('TransferWorkStep2', ['$ scope', '$ http', '$ routeparams', '$ sce', ฟังก์ชั่น ($ scope, $ http, $ routeparams, $ sce) {$ http.get (api/work/get? workid = ' $ scope.currentwork.description = $ sce.trustashtml ($ rootscope.currentwork.description);});รหัส HTML:
<p ng-bind-html = "currentwork.description"> </p>
ผลลัพธ์นี้ถูกนำเสนออย่างสมบูรณ์แบบในหน้า:
สวัสดีวันนี้เราจะไปไหน?
นอกจากนี้เรายังสามารถใช้มันเช่นนี้ห่อหุ้มมันลงในตัวกรองและเรียกมันบนเทมเพลตได้ตลอดเวลา
app.filter ('to_trusted', ['$ sce', ฟังก์ชั่น ($ sce) {ฟังก์ชันส่งคืน (ข้อความ) {return $ sce.trustashtml (ข้อความ);};}]);รหัส HTML:
<p ng-bind-html = "currentwork.description | to_trusted"> </p>
สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับ NG-BIND-HTML Directive และบริการ $ SCE ใน AngularJS ฉันหวังว่ามันจะช่วยให้คุณเรียนหรือทำงานได้ หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร