HTML tags showing in AngularJS

Question

I have an app which is pulling in data from another site using the Wordpress plugin WP-API.

I'm suing AngularJS to then display this information, I'm really new to AngularJS so my problem is that the correct information is being pulled in from the posts but HTML tags are showing such as <p>text</p>.

I'm pulling in data like this (a snippet of my code)-

<script>

    var app = angular.module('myApp', []);

        app.controller('aLlCtrl', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel';
        $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
</script>

<body ng-app="myApp">


            <!--SHOOTING TYPE-->


            <div id="All" class="descshoot">

                <div  ng-controller="aLlCtrl">
                  <div ng-repeat="d in data">
                    <h2 class="entry-title title-post">{{d.title}}</h2>
                    <div id="listing-image"><img src="{{d.acf.logo}}"></div>
                    <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
                    <div id="listing-address-1">
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
                    </div>
                    <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
                    <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
                    <div id="listing-email">Email: {{d.acf.email}}</div>
                    <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
                    <div id="listing-established">Established: {{d.acf.established}}</div>
                    <div id="listing-about">About: {{d.acf.about}}</div>
                    <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
                    <div id="listing-directions">Directions: {{d.acf.directions}}</div>
                    <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
                  </div>
                </div>
              </div>
</body>

And here is a (non-working) pen of my code - http://codepen.io/anon/pen/yePYdq and the site where it's working http://dev.5874.co.uk/goshooting/regions/channel-islands/

Any help would be much appreciated,

Thanks!

Elfayer · Accepted Answer · 2016-01-19 15:40:16Z

3

You need to use ng-bind-html attribute: JSFiddle

DOCUMENTATION

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  {{test}} <!--will show '<p>test</p>'-->
  <div ng-bind="test"></div> <!--will show '<p>test</p>'-->
  <div ng-bind-html="test"></div> <!--will show 'test'-->
</div>

JS:

angular.module("myApp", ["ngSanitize"])
  .controller("myCtrl", function($scope) {
    $scope.test = "<p>test</p>";
  });

Note: Don't forget to include ngSanitize to your module.

answered Jan 19, 2016 at 15:40

Elfayer

4,57010 gold badges50 silver badges78 bronze badges

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

5 Comments

Lucy Brown Over a year ago

Thank you for your quick answer! I was wondering if you could help me out a bit more. I'm really new to Angular and I don't quite understand how I can apply this to my code because my "app" and "controller" are separated and not like the example you've given, it's probably completely obvious but when I attempt it, it breaks the page for me, could you expand on your answer but apply it to my code at all? Thank you again

Elfayer Over a year ago

For example change this line : <div id="listing-email">Email: {{d.acf.email}}</div> to <div id="listing-email">Email: <span ng-bind-html="d.acf.email"></span></div>. Although it might not be a good example, I guess your email won't have HTML tags. But that's the spirit. =)

Lucy Brown Over a year ago

Thank you for this. I t definitely makes more sense, It seems to still break my AngularJS for some rason, but I imagine that's me just not doing it correctly! When you say "Don;t forget to add ngSanitize to your module" Is this more than just adding this somewhere? angular.module("myApp", ["ngSanitize"]) .controller("myCtrl", function($scope) { $scope.test = "<p>test</p>"; }) ?

Elfayer Over a year ago

Yep, 1 you need to download the JS file on the angular official website (code.angularjs.org/1.5.0-rc.0 Take your version of angular) and 2 include it in your index.html (or wherever you include angular) as a <script> tag. 3 Then you just need to include it to your module dependencies : angular.module("myApp", [/* dependencies here */])

Lucy Brown Over a year ago

Ah, I see, I shall give this a go, thanks for all your help!

Collectives™ on Stack Overflow

HTML tags showing in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related