6

Hi I couldn't find a working solution properly. Please help me out.

I have a single page application with ui-selects in the page, basically it is for a directory listing. The user will select folders and finally when he/she selects a HTML file in the list, I am generating a url and I have to display the html file in my spa. I was able to display text files, but I don't know how to display html files. I tried ng-bind-html, but don't know how to display that.

I am getting the content of the html using $http.get method and storing the html content in a variable called "contentHTML" I need to display that

Improve this question

4 Answers 4

Reset to default
3

Your issue is with angular sanitization. It will not let you use ng-bind-html until you stick your HTML content in a special variable that is marked as trusted HTML. Angular makes you do this so that you know that you are very explicitly telling Angular it's okay to render this markup.

It helps protect the average developer from accidentally rendering user input unencoded, which would be very dangerous. You wouldn't want users submitting javascript in input fields and then having your app render that script right into the page somewhere. If it did, the malicious script would run when rendered and could cause all sorts of havoc.

You need to include the ngSanitize module in your app's dependencies.

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

Don't forget to include the angular-sanitize lib in your script references.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script>

Then you need to mark your HTML content as safe to render using the $sce service.

app.controller('myController', function ($scope, $sce) {
  $scope.trustedHtml = $sce.trustAsHtml(contentHTML);
});

Only then will ng-bind-html work.

<div ng-bind-html="trustedHtml"></div>

Demo: http://codepen.io/Chevex/pen/xGYydr?editors=101

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

11 Comments

Hi, thanks for the detailed answer, it is working, but only the text elements of the html are shown, there are graphs, charts and tables in the html file, they are not getting displayed
Think you could duplicate that in a codepen so I can take a look?
the html I'm trying to display is in the local intranet, ill try to create a html and then duplicate that in a codepen.... through ng-bind-html, is it necessary that the html page be static?
Oh... I didn't realize this was an entire HTML page. Well that's why. You're trying to render a full HTML page inside another HTML page. That file should only contain the contents of the body tag. You can move your script and style tags into the body content. I had assumed you were pulling down a chunk of HTML but not a full document since you were trying to show it on the page with angular.
Check out this answer to see how they use Jquery to pull out the body contents. Angular uses jquery behind the scenes. You can substitute anguler.element for all the $ calls. For convenience you can do var $ = angular.element;. You can also use it to move the script tags to the bottom. $('script').append('body');. That would move all script tags to the bottom of the body.
|
3

I think you're looking for ngInclude.
You don't even need to handle the AJAX request, it's done for you.

Fetches, compiles and includes an external HTML fragment.

Usage

<ANY
  ng-include="path_of_your_file.html"
  [onload="string"]
  [autoscroll="string"]>
  ...
</ANY>

Important things to note:

  • Your HTML file needs to be on the same domain or it gets complicated (see docs)
  • This is a template, which means:
    • All relative paths will be relative to the current path, not to the imported template's path
    • Angular in it will be evaluated
Improve this answer

7 Comments

hi, the ng-include is not working.... The html file is not in the local directory, is that why its not getting loaded?
In which directory is it? As long as it is on the same domain and with the same protocol, it will work.
@swordfish12 do you mean that you are getting the html file from internet, a different webpage? even then ng-include works
yup,.... the html that i need to display is located in the intranet......but its not working, it doesn't display anything
@swordfish12 By intranet, you mean the same domain?
|
2

To display your html from contentHtml you need to have a div on your html page like: 

<div ng-controller="htmlBucket">
    {{content}}
</div>

Then in your javascript you should have this

app.registerCtrl('htmlBucket', function($scope)
{
   $scope.content =  $sce.trustAsHtml(contentHTML); 
});

Don't forget include your .js, jquery and angular dependencies to your HTML 

<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>

Hope it helps.

Improve this answer

7 Comments

This will render the markup encoded. Meaning it will turn the string "<h1>hi</h1>" into "&lt;h1&gt;hi&lt;/h1&gt;" when it renders the bound variable.
Yep, that's what happens you stick &lt;h1&gt;hi&lt;/h1&gt; into a web page, it will render the source as page content to be displayed. i.e. you would literally see <h1>hi</h1> displayed on the page as plain text. Demo
To display the content as Html try with this: $scope.content = $sce.trustAsHtml(contentHTML);
@carlos to do that you'll first need to include ngSanitize as an app dependency. My answer goes into detail about the $sce service :)
@swordfish12 My guess is that your graphs, charts and tables need some javascript or CSS to run that isn't loading/running properly. Just a guess. I'll know more once you have the codepen up.
|
1

You can achieve what you are looking for using ui-router. Here is the link for the same.

using ui-select once user select the folders. write a event trigger in your controller to change the url to your predefined one. using $stateProvider. you can also see their example for the same here

Hope that helps

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.