angular ng-bind-html inside ng-repeat

Question

Similar questions with

I have this working html code

<div class="modal modal-wide fade" id="indexHTML" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">index.html</h4>
            </div>
            <div class="modal-body">

            <pre><code class="language-markup" ng-bind-html="indexHTML"></pre></code>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Since I need to use this code many times, instead of copy pasting, I decided to use ng-repeat

<repeat ng-repeat="modal in modals">

    <div class="modal modal-wide fade" id="{{modal.id}}" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{modal.fileName}}</h4>
                </div>
                <div class="modal-body">

                <pre><code class="language-markup" ng-bind-html="{{modal.id}}"></pre></code>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</repeat>

I got this error that I could not figure out

Also, I find out that many people suggesting to use $sce.trustAsHtml(), but in my case my ng-bind-html work perfectly with ngSanitize before im trying to use ng-repeat, so do i really to use it to solve my problem?

Update

I don't know why but when I don't use the ng-repeat, I need to manually replace "<" with "<" in my controller

function getSourceCode(object, property, url) {
    $http.get(url).then(function(response) {
        object[property] = response.data.replace(/</g,"&lt;");
    }).catch(console.error.apply(console));
}

But when I change the code to use the ng-repeat, changing ng-bind-html to ng-bind and removing .replace() function in controller should do the trick.

score 0 · Answer 1 · answered Apr 10 '16 at 17:39

0

ng-bind-html takes an expression. So it should be something like ng-bind-html="modal.html". No {{}}.

answered Apr 10 '16 at 17:39

jlowcs

1,933
1
10
16

I have tried that, but that way it will not referencing to the content of the html. in my case if I use ng-bind instead of ng-bind-html it work perfectly but they will replace the html part for ex "<" to "<" – LckySnday Apr 10 '16 at 17:51

score 0 · Accepted Answer · answered Apr 10 '16 at 19:27

I don't know why but when I don't use the ng-repeat, I need to manually replace "<" with "<" in my controller

function getSourceCode(object, property, url) {
    $http.get(url).then(function(response) {
        object[property] = response.data.replace(/</g,"&lt;");
    }).catch(console.error.apply(console));
}

But when I change the code to use the ng-repeat, changing ng-bind-html to ng-bind and removing .replace() function in controller should do the trick.

angular ng-bind-html inside ng-repeat

2 Answers2