current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 7 down vote favorite
1

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

share|improve this question
up vote 2 down vote accepted

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

share|improve this answer
    
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 – clearScreen Jul 3 '15 at 6:13
    
Think you could duplicate that in a codepen so I can take a look? – Chev Jul 3 '15 at 6:21
    
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? – clearScreen Jul 3 '15 at 6:26
1  
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. – Chev Jul 3 '15 at 7:27
1  
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. – Chev Jul 3 '15 at 7:39
up vote 2 down vote

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
share|improve this answer
    
hi, the ng-include is not working.... The html file is not in the local directory, is that why its not getting loaded? – clearScreen Jul 3 '15 at 6:15
    
In which directory is it? As long as it is on the same domain and with the same protocol, it will work. – Jerska Jul 3 '15 at 6:16
    
@swordfish12 do you mean that you are getting the html file from internet, a different webpage? even then ng-include works – akashrajkn Jul 3 '15 at 6:20
    
yup,.... the html that i need to display is located in the intranet......but its not working, it doesn't display anything – clearScreen Jul 3 '15 at 6:23
    
@swordfish12 By intranet, you mean the same domain? – Jerska Jul 3 '15 at 6:26
up vote 2 down vote

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.

share|improve this answer
1  
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. – Chev Jul 3 '15 at 6:09
1  
I tried this, but it displays the html source..... – clearScreen Jul 3 '15 at 6:22
2  
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 – Chev Jul 3 '15 at 6:23
    
To display the content as Html try with this: $scope.content = $sce.trustAsHtml(contentHTML); – Sapikelio Jul 3 '15 at 6:28
1  
@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. – Chev Jul 3 '15 at 6:32
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.