상세 내역을 db화 할때 full text가 encoding된 html text일 수 있다
등록할때 보통 text를 escape하거리 html encoding하여 db에 등록하곤한다.
angularjs 사용에서 db에 들어있는 html text를 화면에 바인딩 하려면 ng-bind-html을 이용한다.
html로 표현하며 바인딩하기
encoding된 html text를 ng-bind-html 로 바인딩 하면 decoding하여 표현만 하고 html이 적용된 모습으로 화면에 표현되진 않는다.
그래서
ng-bind-html을 이용할때는 decoding된 html full text를 $scope 영역에 담고 사용한다.
<p>상품상세 부분 html encoded text will be added</p>
<ol>
<li>상품의 상세정보를 기술한다</li>
<li>이미지를 첨부할 수 있다<img src="https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206" alt="" width="530" height="808" /></li>
<li>기타 <a href="http://doitforyou.co.kr">링크를</a> 추가할 수 있따.</li>
</ol>
==>ENCODED HTML
<p>상품상세 부분 html encoded text will be added</p>
<ol>
<li>상품의 상세정보를 기술한다</li>
<li>이미지를 첨부할 수 있다<img src="https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206" alt="" width="530" height="808" /></li>
<li>기타 <a href="http://doitforyou.co.kr">링크를</a> 추가할 수 있따.</li>
</ol>'
=>
c#을 사용하고 있어
결과 dataset의 특정필드를 htmldecode시켜서 VIEW페이지로 리턴한다.
private void getProdPrice(String sParam1)
{
bivrProdM oProd = new bivrProdM();
DataSet dsResult = null;
dsResult = oProd.GetProdPrice(sParam1);
dsResult.Tables[0].Rows[0]["CONTENTS1"] = Server.HtmlDecode(dsResult.Tables[0].Rows[0]["CONTENTS1"].ToString());
String jsonString = JsonConvert.SerializeObject(dsResult);
Response.Write(jsonString);
}
html page
<div class="col-xs-12 col-sm-10 blog-content">
<a href="#"><img class="img-responsive img-blog" check-image ng-src="{{imageUrl}}" width="100%" alt="" /></a>
<h2><a href="blog-item.html">Consequat bibendum quam liquam viverra</a></h2>
<h3>Curabitur quis libero leo, pharetra mattis eros. Praesent consequat libero eget dolor convallis vel rhoncus magna scelerisque. Donec nisl ante, elementum eget posuere a, consectetur a metus. Proin a adipiscing sapien. Suspendisse vehicula porta lectus vel semper. Nullam sapien elit, lacinia eu tristique non.posuere at mi. Morbi at turpis id urna ullamcorper ullamcorper.</h3>
<a class="btn btn-primary readmore" href="blog-item.html">Read More <i class="fa fa-angle-right"></i></a>
htmlTest : [{{AddHtmlData}}] vs. [<span ng-bind-html="AddHtmlData"></span>]
</div>
--------------------------------------------
angularjs사용하기 위한 스크립트
--------------------------------------------
<script src="https://code.angularjs.org/1.7.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.7.6/angular-sanitize.min.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
.......
$http.get("/View/getProductDetails.aspx?oP=" + oParam1)
.then(function (response) {
$scope.PDTLNAME = response.data.Table[0].PDTLNAME;
$scope.PINITAMT = response.data.Table[0].PINITAMT;
$scope.PTAXAMT = response.data.Table[0].PTAXAMT;
$scope.CONTENTSTITLE = response.data.Table[0].CONTENTSTITLE;
var CONTENTS1= response.data.Table[0].CONTENTS1;
// var aa = "<p>상품상세 부분 html encoded text will be added</p><ol><li>상품의 상세정보를 기술한다</li><li>이미지를 첨부할 수 있다<img src="https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206" alt="" width="530" height="808" /></li><li>기타 <a href="http://doitforyou.co.kr">링크를</a> 추가할 수 있따.</li></ol>";
$scope.AddHtmlData = CONTENTS1;
//alert(response.data.records);
}, function (response) {
//return $q.reject(response.status + " " + response.data.error);
alert(response.status + " " + response.data.error);
});