0

What's the best solution to show html content inside a web page in a AngularJs app ? I have to fetch the content with a post request, so I can't use the "iframe" tag with the "src" attribute to load it. I thought of stripping some html tags, like "html" "head" "body" and then show the content into a "div" tag. But I don't know how to remove some html tags from a string.

Any advice ?

Thank you

Andrea Borgogelli Avveduti
  • 3,468
  • 4
  • 18
  • 20

1 Answers1

0

One way to do this (without manipulating the dom from a controller) is to create a directive, then use angular.element().append() to inject the html response of the POST call.

HTML

<remote-content></remote-content>

The directive will replace that element with the retrieved HTML

Note: this is dash-case to match the camelCase of the directive name, remoteContent -> remote-content

DIRECTIVE

app.directive('remoteContent', function($http) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {

      $http.post('/endpoint', {format:'html'}).
        success(function(html) {

          // remove wrapping html and body tags etc if necessary

          angular.element(element).append(html);

        }).
        error(function(data, status, headers, config) {

          alert("Could not fetch remote HTML");

        });

    }
  };
});

Here's a Plunkr that shows the DOM HTML injection without the $http.post call.

Since the HTML response is just a string, you can use replace to find the wrapping tags and remove them:

var content_html = html.replace(/<\/?(html|body)>/g, '');

But if the <head> contains script tags and whatnot, you'll need to use substring to find the <body> tag and just get the content within it.

notbrain
  • 3,366
  • 2
  • 32
  • 42
  • Hi Brian, I have already tried something like that, but how can I strip all the stylesheet tag and other junk ? I think that "string replace" is not the right way, and "regex" is too complicated. What do you think about it ? Do you know if I can use the iframe tag with ng-src and the ng-bind-html directive all together ? – Andrea Borgogelli Avveduti May 25 '15 at 19:12
  • Depends on how much "other junk" you have. You could find the position in the string of `` and the position of `` and then with some simple math you can derive the indexes to use for `.substring()` to get the innerHTML of ``. I'm not sure about the iframe thing I have never tried that. Do you need any of the styles or js to render for the content? – notbrain May 26 '15 at 02:38
  • I don't need js to render the content, but css is needed ! – Andrea Borgogelli Avveduti May 26 '15 at 08:38
  • If you are required to make a POST req to get your content, I don't think using an iframe is possible - you need a `src` attribute for an iframe to load the content, which is a GET request as if you had used the address bar. With the `append(html)` method, to maintain CSS styling you will probably need to add it to your local project (its own CSS file or appended to an existing file) so it works when the HTML is loaded into the directive element. – notbrain May 26 '15 at 16:48