상세 내역을 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

&lt;p&gt;상품상세 부분 html encoded text will be added&lt;/p&gt;

&lt;ol&gt;

&lt;li&gt;상품의 상세정보를 기술한다&lt;/li&gt;

&lt;li&gt;이미지를 첨부할 수 있다&lt;img src=&quot;https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206&quot; alt=&quot;&quot; width=&quot;530&quot; height=&quot;808&quot; /&gt;&lt;/li&gt;

&lt;li&gt;기타 &lt;a href=&quot;http://doitforyou.co.kr&quot;&gt;링크를&lt;/a&gt; 추가할 수 있따.&lt;/li&gt;

&lt;/ol&gt;'


=>



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 = "&lt;p&gt;상품상세 부분 html encoded text will be added&lt;/p&gt;&lt;ol&gt;&lt;li&gt;상품의 상세정보를 기술한다&lt;/li&gt;&lt;li&gt;이미지를 첨부할 수 있다&lt;img src=&quot;https://t1.daumcdn.net/cfile/tistory/996B28455C1F6FB206&quot; alt=&quot;&quot; width=&quot;530&quot; height=&quot;808&quot; /&gt;&lt;/li&gt;&lt;li&gt;기타 &lt;a href=&quot;http://doitforyou.co.kr&quot;&gt;링크를&lt;/a&gt; 추가할 수 있따.&lt;/li&gt;&lt;/ol&gt;";

                    $scope.AddHtmlData = CONTENTS1;


                   


                    //alert(response.data.records);

                }, function (response) {


                    //return $q.reject(response.status + " " + response.data.error);

                    alert(response.status + " " + response.data.error);

                });





+ Recent posts