AngularJs Encoding Issue

Question

I have

$scope.pager = function() {
    $sce.trustAsHtml('
        <ul class="pagination">
            <li class="disabled" title="First Page"><a data-index="1" href="javascript:" ng-click="getProducts($event)">&lt;&lt;</a></li>
            <li class="disabled" title="Previous Page"><a data-index="0" href="javascript:" ng-click="getProducts($event)">&lt;</a></li>
            <li class="active" title="1"><a data-index="1" href="javascript:" ng-click="getProducts($event)">1</a></li>
            <li title="2"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">2</a></li>
            <li title="3"><a data-index="3" href="/Product/List?pageIndex=3" ng-click="getProducts($event)">3</a></li>
            <li title="4"><a data-index="4" href="/Product/List?pageIndex=4" ng-click="getProducts($event)">4</a></li>
            <li title="5"><a data-index="5" href="/Product/List?pageIndex=5" ng-click="getProducts($event)">5</a></li>
            <li title="6"><a data-index="6" href="/Product/List?pageIndex=6" ng-click="getProducts($event)">6</a></li>
            <li title="7"><a data-index="7" href="/Product/List?pageIndex=7" ng-click="getProducts($event)">7</a></li>
            <li title="8"><a data-index="8" href="/Product/List?pageIndex=8" ng-click="getProducts($event)">8</a></li>
            <li title="9"><a data-index="9" href="/Product/List?pageIndex=9" ng-click="getProducts($event)">9</a></li><li title="10"><a data-index="10" href="/Product/List?pageIndex=10" ng-click="getProducts($event)">10</a></li>
            <li title="Next Page"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">&gt;</a></li>
            <li title="Last Page"><a data-index="4999" href="/Product/List?pageIndex=4999" ng-click="getProducts($event)">&gt;&gt;</a></li>
        </ul>'
    ');
};

<div class="row" ng-bind-html="pager()">
</div>

View Showing nothing. Then I tried,

$scope.pager ='<ul class="pagination"><li class="disabled" title="First Page"><a data-index="1" href="javascript:" ng-click="getProducts($event)">&lt;&lt;</a></li><li class="disabled" title="Previous Page"><a data-index="0" href="javascript:" ng-click="getProducts($event)">&lt;</a></li><li class="active" title="1"><a data-index="1" href="javascript:" ng-click="getProducts($event)">1</a></li><li title="2"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">2</a></li><li title="3"><a data-index="3" href="/Product/List?pageIndex=3" ng-click="getProducts($event)">3</a></li><li title="4"><a data-index="4" href="/Product/List?pageIndex=4" ng-click="getProducts($event)">4</a></li><li title="5"><a data-index="5" href="/Product/List?pageIndex=5" ng-click="getProducts($event)">5</a></li><li title="6"><a data-index="6" href="/Product/List?pageIndex=6" ng-click="getProducts($event)">6</a></li><li title="7"><a data-index="7" href="/Product/List?pageIndex=7" ng-click="getProducts($event)">7</a></li><li title="8"><a data-index="8" href="/Product/List?pageIndex=8" ng-click="getProducts($event)">8</a></li><li title="9"><a data-index="9" href="/Product/List?pageIndex=9" ng-click="getProducts($event)">9</a></li><li title="10"><a data-index="10" href="/Product/List?pageIndex=10" ng-click="getProducts($event)">10</a></li><li title="Next Page"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">&gt;</a></li><li title="Last Page"><a data-index="4999" href="/Product/List?pageIndex=4999" ng-click="getProducts($event)">&gt;&gt;</a></li></ul>'

<div class="row">
{{pager}}
</div>

This time angular is showing the tags instead of rendering it.

you need to $compile it

Jscti
– Jscti

2014-04-17 12:32:13 +00:00
Commented Apr 17, 2014 at 12:32 — Jscti
– Jscti, Commented Apr 17, 2014 at 12:32
@Bixi how? Let me know

Imran Qadir Baksh - Baloch
– Imran Qadir Baksh - Baloch

2014-04-17 12:32:47 +00:00
Commented Apr 17, 2014 at 12:32 — Imran Qadir Baksh - Baloch
– Imran Qadir Baksh - Baloch, Commented Apr 17, 2014 at 12:32

Imran Qadir Baksh - Baloch · Accepted Answer · 2014-04-17 12:34:43Z

1

Try this:

<div ng-bind-html="pager"/>

And in your app include the angular-sanitize.js script as well as the ngSanitize module in your app declaration. You also need to set $sce.trustAsHtml

More info here.

edited Apr 17, 2014 at 12:34

Imran Qadir Baksh - Baloch

34.3k69 gold badges198 silver badges351 bronze badges

answered Apr 17, 2014 at 12:25

ppa

3261 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs Encoding Issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related