5

Alright, so the following below that I've tested in code works:

javascript:

var string = '<p>hello</p>';
$scope.html = $sce.trustAsHtml(string);

html:

<span ng-bind-html="html"></span>

The thing I'm really trying to do is this: Pulling a bunch of items from the server in JSON form. One of the JSON's key is called "description", which is just a long string of html code.

I'm pushing these items into a $scope array so I can show them on the page through an ng-repeat directive. The code below summarizes how it's being done:

javascript:

$.getJSON('someURL', function(data) {
    $scope.items = [];
    for (var i = 0; i < data.count; i++) {
        var item = {};
        item.description = $sce.trustAsHtml(data.item[i].description);
        $scope.items.push(item);
    }
});

html:

<p ng-repeat="item in items">
    <span ng-bind-html="item.description"></div>
</p>

This isn't producing any output for some reason. Something I read was that whatever variable you bind the $sce.trustAsHtml() to must be a $scope variable. In this case, I'm setting it to a regular variable "item.description" and then adding it to a $scope.item array.

I suspect this may be why it's not working, but I don't know how to go about fixing it.

Can anyone help with this?

Thanks!

4

2 Answers 2

9

With AngularJS 1.4.9 it worked for me like this:

Controller:

.controller('MyCtrl', ['$scope', '$sce',
    function($scope, $sce) {
        $scope.infoText = $sce.trustAsHtml('My <strong>HTML text</strong>');
    }
])

Template:

<span ng-bind-html="infoText"></span>
9

Try <span ng-bind-html="'{{item.description}}'"></span>.

Something like this worked for me.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.