CODEWITHSUNDEEP
javascripthtmlangularjswordpressangular-ui-router
Steve
Steve

Reputation: 14912

Wordpress Rest API and AngularJS ui-sref and custom HTML

I am setting up an AngularJS app to pull some of its content from a Wordpress back-end using the wp-rest api v2.

It's working well, but certain HTML attributes are being stripped out notably if my post has HTML entered like this

I have a <a ui-sref="trays">link</a>

The resulting page in my angular app does not have the ui-sref, and is only

<p>I have a <a>link</a></p>

I have also tried

I have a <a href= "" ui-sref="trays">link</a>

but then I only get

<p>I have a <a href="">link</a></p>

I don't expect Wordpress to "understand" what ui-sref does, but how can I get the code to pass through to my app, which does understand what to do with such a link.

How do I get all the html from the back end to come through to Angular?

On the template, I have

<div ng-bind-html="post.content.rendered"></div>

in Postman, when querying the post I get back:

"content": {
        "rendered": "<p>hello there I am <strong>another</strong> post!</p>\n<p>I have a <a href= \"\" ui-sref=\"trays\">link</a>, too.</p>\n",
        "protected": false
    },

update

I have tried adding a filter to the ng-bind-html to trust the text:

<div ng-bind-html="post.content.rendered | toTrusted"></div>

which is using this filter

angular.module('app').filter('toTrusted', ['$sce', function ($sce) {
 return function (text) {
   return $sce.trustAsHtml(text);
 };

}]);

Which does pass through the ui-sref. However, the link does not register as a link unless I also add an empty href, but then it just does to my default route, not "trays".

Upvotes: 0

Views: 37

Answers (1)

user4564782
user4564782

Reputation:

It happens when the ui-router cannot find this route, check if trays route and all the files are included and try to access the route without link, put the route url in the browser and if it exists will be shown.

Upvotes: 0

Related Questions