Angular Directives not being rendered when pulled from JSON Object

Question

I am trying to build a front end that pulls content from a Wordpress CMS. So far I have been successful in using the WP REST API plugin to pull JSON data from my Wordpress instance and display the HTML content using 'ng-bind-html'.

However when I try to display AngularJS directives or expressions within this code, it doesn't appear to work.

Here is a snippet of my JSON object. The standard HTML tags render ok, and the actual content inbetween the AngularUI tab directives renders ok too. Couldn't get it to render here correctly, so took a screenshot.

Any suggestions?

And where is the code? You need to add code you tried so far or you may face downvotes. — Anand G, Oct 26 '15 at 13:22
`ng-bind-html` doesn't compile directives. That's not what it was intended for. Would need to use your own directive and use `$compile` — charlietfl, Oct 26 '15 at 13:22
is it possible to compile directives that are being introduced using ng-bind? — JMcGuire, Oct 26 '15 at 13:24

LordTribual · Accepted Answer · 2015-10-26T15:21:38.650

As @charlietfl mentioned in his comment, ng-bind-html only interts the HTML content in a safe way and this is what the documention says:

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service

You need to implement a custom directive for your need, so that the HTML content included in your response will also be compiled using the $compile service. This could look like this:

app.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.bindHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}]);

The code is inspired by the angular-bind-html-compile project on GitHub.

Thanks for sharing this. I was not familiar with the $compile component in Angular. Just did a search and found a useful solution here > http://stackoverflow.com/questions/19726179/how-to-make-ng-bind-html-compile-angularjs-code — JMcGuire, Oct 26 '15 at 13:40

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Thanks for the help guys, actually found my answer just as LordTribual shared his suggestion.

Link here - How to make ng-bind-html compile angularjs code

edited May 23 '17 at 12:31

Community

1
1

answered Oct 26 '15 at 13:41

JMcGuire

63
6

Angular Directives not being rendered when pulled from JSON Object

2 Answers2