Angularjs: ng-bind-html & ng-repeat

Question

I have a views that i am updating after I retrieve them from the database for this template:

<div class="row" ng-repeat="post in posts">
        <div class="col-lg-9 col-lg-offset-2">        
          <!-- blog entry -->
          <br ng-hide="$last">
          <h1><a href="{{'#/post/' + post.title}}">{{post.title}} </a></h1>
          <p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.time_Date | date:'MM/dd/yyyy @ h:mma'}} </p>
          <div class="image_Center">
            <!-- <img ng-src="{{post.imageUrl}}" width="550" height="450"> -->
            <img ng-src="{{post.imageUrl}}" width="450" height="350">
          </div>
          <br>
          <br>
          <div ng-bind-html="TrustDangerousSnippet()">
            <p>{{post.post}}</p>
          </div>
............not properly closed(huge template)

I am trying to update {{post.post}} with markdown text that I store and have it display properly using my controller. The code is as follows:

$scope.posts = input_data;
$scope.TrustDangerousSnippet = function() {
  return $sce.trustAsHtml(input_data.post);
};

input_data is the collection of JSON objects(blog posts) from my server. The problem is that this entire object is not displayed, but if were to display one of the objects, it renders to the page. What could be the problem?

$scope.posts = input_data;
$scope.TrustDangerousSnippet = function() {
  return $sce.trustAsHtml(input_data[1].post);
};

Does this have something to do with not using ng-repeat in a proper way?

Tim · Accepted Answer · 2014-03-17 09:40:13Z

7

Your trying to parse input_data.post in the TrustDangerousSnippet function, but that doesnt exist.

Instead, pass the object into the method like this:

<div ng-bind-html="TrustDangerousSnippet(post.post)">
</div>

Change the method to:

$scope.TrustDangerousSnippet = function(snippet) {
  return $sce.trustAsHtml(snippet);
};

fiddle example: http://jsfiddle.net/ZxPHW/

Edit: in addition, you don't need to add {{post.post}} to the html.

edited Mar 17, 2014 at 9:40

answered Mar 17, 2014 at 9:33

Tim

4772 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Angularjs: ng-bind-html & ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related