Geek Answers Handbook

Dynamically display AngularJS HTML pages

Hi, I could not find a working solution properly. Please help me.

I have a single page application with ui-selects on the page, basically this is a list of directories. The user will select the folders and finally, when he / she selects the HTML file from the list, I create the URL and I have to display the html file in my spa. I managed to display text files, but I do not know how to display html files. I tried ng-bind-html but don't know how to display this.

I get the html content using the $ http.get method and saving the html content in a variable called contentHTML, I need to display that

+6
source share
4 answers

Your problem is with angular disinfection. It will not allow you to use ng-bind-html until you paste your HTML content into a special variable marked as robust HTML. angular forces you to do this so that you know that you explicitly tell angular that this markup can be done.

This helps protect the average developer from inadvertently displaying user input, which would be very dangerous. You do not want users to send javascript to the input fields and then show that your application is displaying the script directly on the page somewhere. If this is the case, the malicious script will run during rendering and may cause all kinds of hacks.

You need to enable the ngSanitize module depending on your application.

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

Remember to include angular -sanitize lib in your script links.

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

Then you need to mark your HTML content as safe for rendering 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

+3
source

I think you are looking for ngInclude .
You do not even need to process an AJAX request, this is done for you.

Selects, compiles, and includes an external HTML fragment.

Using

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

It is important to note:

  • Your HTML file must be in the same domain or it becomes complex (see docs)
  • This is a template that means:
    • All relative paths will refer to the current path, not the path of the imported template.
    • Angular in it will be evaluated
+3
source

To display your html from contentHtml, you need to have a div on your html page, for example:

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

Then in your javascript you should have this

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

Remember to point your .js, jquery and angular dependencies to your HTML

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

Hope this helps.

+2
source

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

using ui-select when the user selects folders. write an 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

+1
source

More articles:


All Articles