AngularJs : วิธีแปลง string แสดงผล HTML ด้วย

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 9710
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

AngularJs : วิธีแปลง string แสดงผล HTML ด้วย

โพสต์โดย thatsawan » 07/07/2016 12:29 am

โดยปกติเเล้วถ้าเราส่งค่าอะไรก็ตามมาเป็น HTML ผลที่ได้ มันจะได้เเบบ String มา วิธีแปลงเราจะใช้

โค้ด: เลือกทั้งหมด

        <script type="text/javascript" src="http:////ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>

แสดงผลต้องใช้ ng-bind-html

โค้ด: เลือกทั้งหมด

 <p ng-bind-html="myHTML"></p

โค้ด: เลือกทั้งหมด


<html>
    <
head>
        <
title></title>
    </
head>
    <
body>
        <
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>

        <div ng-app="MyApp" ng-controller="MyController">

            <span ng-bind-html="Message"></span>
            <br>
            {{Message}}
        </div>

        <script type="text/javascript">
            var app = angular.module('MyApp', ['ngSanitize'])
            app.controller('MyController', function ($scope) {
                $scope.Message = "My name is <span><b>rongrong</b></span>";
            });
        </script>
    </body>
</html>

ผลที่ได้

โค้ด: เลือกทั้งหมด

My name is rongrong
My name is 
<span><b>rongrong</b></span>



หรือ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor
.
-->
<
html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">

        <!-- Ugly Hack to make remote files preload in jsFiddle --> 
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
        <script type="text/javascript" src="http:////ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>

    </head>
    <body>
        <div ng-app="ngSanitize">
            <div ng-controller="Ctrl">
                Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
                <table>
                    <tr>
                        <td>Directive</td>
                        <td>How</td>
                        <td>Source</td>
                        <td>Rendered</td>
                    </tr>
                    <tr id="bind-html-with-sanitize">
                        <td>ng-bind-html</td>
                        <td>Automatically uses $sanitize</td>
                        <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
                        <td><div ng-bind-html="snippet"></div></td>
                    </tr>
                    <tr id="bind-html-with-trust">
                        <td>ng-bind-html</td>
                        <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
                        <td>
                            <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;
  t;/div&gt;</pre>
                        </td>
                        <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
                    </tr>
                    <tr id="bind-default">
                        <td>ng-bind</td>
                        <td>Automatically escapes</td>
                        <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
                        <td><div ng-bind="snippet"></div></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    <script>
        function Ctrl($scope, $sce) {
            $scope.snippet =
                    '<p style="color:blue">an html\n' +
                    '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
                    'snippet</p>';
            $scope.deliberatelyTrustDangerousSnippet = function () {
                return $sce.trustAsHtml($scope.snippet);
            };
        }
    </script>
</html>

ศึกษาต่อได้ที่นี่
https://docs.angularjs.org/api/ng/directive/ngBindHtml
https://docs.angularjs.org/api/ngSaniti ... /$sanitize

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน