0

Having trouble wrapping my head around something in Angular. I have a page where I list blog posts (or will, anyway). The posts are stored within a database. Angular gets them from a php script. That's all fine and dandy, but these blogs will understandably have tags (a, img, etc.) embedded in them. Angular doesn't seem to like that.

After searching around here I found an answer two the error produced when my blog posts had newline characters in them (the horror). (white-space: pre-wrap). I'm finding no such love with an embedded tag. Also, having a double quotation mark in a message results in the page not being rendered and an error in the console.

I'm sure this has been asked many times, but the search is only yielding me false positives. :(

EDIT: plunker or jsfiddle will require me to change the model a bit. Let me try this.

Here's the actual code.

   <script>

    function aboutController($scope,$http) {
    var site = "http://onfilm.us";
    var page = "/about.php";

    $http.get( site + page )
    .success(function(response) {

        for ( i = 0; i < response.length; i++ ) {
            console.log( response[i] )
        }

        $scope.data = response;
    });
}

</script>
</head>
<body>

    <script src="header.js"></script>
    <div class="centered" style="top: 50px; width: 500px" data-ng-app="" data-ng-controller="aboutController">
        <div class="" style="font-family: sans-serif;" data-ng-repeat="item in data">
                <div class="text">{{ item.message }}</div>
        </div> 
    </div>
</body>

You can see the output in action here: http://onfilm.us/about.html

The troubling part would be in this snippit. taken from Erick Kim's informative website ... It shows up as string literal w/ the code above... not a link.

You can see the whole data it's reading in here if you want: http://onfilm.us/about.php

Improve this question
2
  • It would really help if you could post a fiddle/plunker. Commented Oct 7, 2014 at 1:27
  • I put a sample up there for now. I will try a fiddle in a bit. Commented Oct 7, 2014 at 2:54

1 Answer 1

Reset to default
1

To include html tags in your bindings:

  1. Include angular-sanitize.js in your page:

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.min.js"></script>

  2. Include the ngSanitized service in your app's dependencies. Do this where you define your module, like so:

    angular.module('yourModule', ['ngSanitize'])

  3. Use ng-bind-html to bind your data; so, replace:

    <div class="text">{{ item.message }}</div>

    with

    <div class="text" ng-bind-html="item.message"></div>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks -- I will check this out tomorrow. Running on fumes now. ;)
Sorry for the tardiness. Just tried it out. Worked! Thanks!
One tiny thing -- the single quotation mark seems to be okay, but I get a parsing error w/ the double-quotation mark.
Do you mean that when the string value of item.message has double quotes in it, it fails to parse? Is there an error message? Also, can you post the string that causes it to fail?
The value in the database looks like ["A quote is worth..."]. Using brackets to show that in a DB column. The error is "unexpected token A". However, I've found a work around by escaping the the quotation marks with \. \"A quote is worth...\" works in this case. Liveable... just curious why the single quotations don't require this.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.