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!
You need to use ng-bind-html attribute: JSFiddle
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.