Using AngularJS with innerHTML

Question

I have some AngularJS stuff that holds a bunch of arrays and data. Once a user uploads a file, the file gets parsed up and saved into the scope with its different arrays. However, after all of this and the file is held in the scope, I try to update the innerHTML, but the AngularJS code does not work. I use ng-repeat to create a table based on the arrays, but it remains a single cell with content looking like {{column}} and the like.

I have had extreme difficulty using directives and templates because my index.html says that app and module, etc, are undefined when I do something such as app.directive(...

The significant parts of my index.html file include:

<html ng-app>
... //once a file is uploaded, total.js is called;
//this was so the app didn't try to run before a file was uploaded
<div id="someStuff">This will become a table once a file is uploaded</div>

This is a simple example of how my scope is set up in total.js:

function sheet($rootScope, $parse){
    $rootScope.stuff = text; 
//text is a variable that contains the file's contents as a string
};

document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>";

The HTML changes but instead of printing the file's contents, it only prints {{stuff}}. How can I get the innerHTML to understand that it contains AngularJS, preferably without using a partial or a directive, unless you can thoroughly explain where I'd input it and the syntax of it.

Edit 1: I have tried using $compile but it is marked as undefined. I looked at this to figure out the compile problem, but I don't understand rtcherry's syntax, and how I should apply it to my own code.

Edit 2: I still receive $compile undefined errors when I include it like so:

function sheet($rootScope, $parse, $compile){...};
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'>
{{stuff}}</div>")(scope);

Edit 3: While itcouldevenbeaboat's comment was extremely unhelpful, I decided I should perhaps show you the directive way I attempted to do it.

I included this code under my sheet function:

var app = angular.module('App', []);
app.directive('spreadsheeet', function($compile){
    return{
        templateUrl: innerHTML.html
    }
});

Where innerHTML contains <div ng-controller='sheet'>{{stuff}}</div>and on index.html I've included <div spreadsheet></div>

With this, I receive no errors, but the text does not show up, neither as {{stuff}} or as the file's contents. Even when I do something simple, such as provide template: "<h2>Hello!</h2>" instead of a templateUrl, I cannot get Hello! to print.

innerHTML =$compile("<div ng-controller='sheet'>{{stuff}}</div>")(scope) — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 15, 2013 at 20:17
you can inject $compile like other angular services/tools. Just the same way as you would like use $scope or $rootScope. — alfrescian
– alfrescian, Commented Jul 15, 2013 at 21:35
INCOMING BIG HELP: You should not use innerHTML with Angular.js. END BIG HELP — Code Whisperer
– Code Whisperer, Commented Jul 15, 2013 at 22:15

Mher · Accepted Answer · 2014-10-21 23:33:31Z

5

It works for me

document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>";
$compile( document.getElementById('someStuff') )($scope);

answered Oct 21, 2014 at 23:33

Mher

1,34313 silver badges31 bronze badges

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

Comments

Pang · Accepted Answer · 2018-02-07 05:36:08Z

0

Simple solution (it will work 100%):

In controller, don't forget to inject $document in controller as a dependency, like this:

App.controller('indiaController', function ($scope, $document,$filter, $location) {

    var text_element = angular.element($document[0].querySelector('#delhi');
    text_element.html('your dynamic html placed here');
}

edited Feb 7, 2018 at 5:36

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Feb 5, 2018 at 18:18

Shashwat Gupta

5,31845 silver badges33 bronze badges

Comments

Joao Pedro · Accepted Answer · 2023-04-12 19:24:36Z

0

ngBindHtml

directive in module ng

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. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core AngularJS). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

Usage

as element:

    <ng-bind-html
      ng-bind-html="expression">
    ...
    </ng-bind-html>

as attribute:

    <ANY
      ng-bind-html="expression">
    ...
    </ANY>

answered Apr 12, 2023 at 19:24

Joao Pedro

11 bronze badge

Collectives™ on Stack Overflow

Using AngularJS with innerHTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related