How to write HTML inside elements with Angular

Question

I'm beginning with Angular, and just wanted to make some tests with Ajax, retrieving a document into my page. It works perfectly, but then a new challenge appeared: I want to be able to add HTML inside a DOM element.

Normally, one would do that from a directive and the templates thingy. But I want to do it at runtime, using a controller.

This is my code:

$http.get("import.html").then(function(response){
    var element = document.createElement("div");
    element.innerHTML = response.data;
    angular.element("#div1").innerHTML(element);
        });

Maybe I'm not using correctly "angular.element"? I tried using document.getElementByID, but it doesn't work either. I receive correctly the information from the file, but I just don't find a way I can compile that HTML in runtime.

Any help with this?

edit for showing my full code:

HTML:

<!DOCTYPE html>
<html ng-app="miApp">
    <head>
        <meta charset="UTF-8">
        <script src="angular.js"></script>
        <script src="mainmodule.js"></script>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    </head>
    <body ng-controller="controlador1">
      <div id="div1" ng-bind-html="myHtml" style="top:50px;left:50px">
      </div>
    </body>
</html>

JS: (tested all your examples, none worked for me, this is the last I used)

app.controller('controlador1', ["$scope", "$http", "$sce", "$compile", function($scope, $http, $sce, $compile) {

    $http.get("import.html").then(function(response) {

        var parent = angular.element("#div1");
var element = angular.element($sce.trustAsHtml(response.data);
$compile(element)($scope);
parent.append(element);
    });


}]);

Johannes Jander · Accepted Answer · 2016-02-03 11:30:46Z

2

Usually, you want to compile your HTML if it contains any angular functionality at all (you need to declare '$compile' in your controller dependency list):

myApp.controller('myController', ['$scope', '$sce', '$compile'],
   $scope, $sce, $compile) {

 $http.get("test.html")
  .then(function(response){
    var parent = angular.element("#div1");
    parent.append($compile(response.data) ($scope));
  });
}]);

if you are hell-bent on useing innerHTML, note that angular.element("#div1") is the same as $("#div1") in jQuery. So you need to write angular.element("#div1")[0].innerHTML= ...

Here's a plnkr: http://plnkr.co/edit/p3TXhBppxXLAMwRzJSWF?p=preview

edited Feb 3, 2016 at 11:30

answered Feb 3, 2016 at 10:10

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

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

2 Comments

Zerok Over a year ago

That's not working for me. No code works below the angular.element() methods, not even alerts. Something is wrong with that method I guess. Also, how should I use the $sce.trustAsHtml method?

Zerok Over a year ago

Keeps the same way: nothing shows up in screen nor in console.

Shashank · Accepted Answer · 2016-02-03 11:26:52Z

1

In this, I have made use of $sce. It's a dependency injection of AngularJS, where it treats the HTML as safe to bind. You can read about it in AngularJS site. Please find below code and working jsfiddle for the raised concern:

HTML:

<div ng-app="app" ng-controller="test">
    <div>
        This is onload HTML
    </div>
    <div ng-bind-html="dynamicHtml"></div>
</div>

JS

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

app.controller('test', function ($scope, $sce) {
    $scope.dynamicHtml = $sce.trustAsHtml("<div>This is dynamic HTML!!");
});

[Update]

HTML:

<div ng-bind-html="dynamicHtml"></div>`

JS:

$http.get("import.html").then(function (response) {
    $scope.dynamicHtml = $sce.trustAsHtml(response.data); //Assuming 'response.data' has the HTML string
});

edited Feb 3, 2016 at 11:26

answered Feb 3, 2016 at 10:29

Shashank

2,1002 gold badges21 silver badges40 bronze badges

4 Comments

Zerok Over a year ago

Not working. I injected the $sce dependency and used your code with the response.data, but it just won't show anything.

Shashank Over a year ago

where is it not working?can you show your js contents?

Shashank Over a year ago

In this you shouldn't create dynamic div but that div should be existing in the HTML and should be bind with the model. As soon as the model gets updated the div will bind the HTML. Look I have updated the answer.

Zerok Over a year ago

Ok, I don't know why, but now it's working! Thank you!

Serginho · Accepted Answer · 2016-02-03 10:57:55Z

0

You are not using correctly angular. If you use angular, you don't harly ever have to use DOM selector.

Scope is binded with ng-model and {{}} on the view.

Now your answer. To print html on the view, you can do it in that way:

In controller:

$http.get("import.html").then(function(response){
   $scope.html = $sce.trustAsHtml(response.data);
});

In view:

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

And more easy way:

<ng-include="'url/import.html'"><ng-include>

That's it!!!

edited Feb 3, 2016 at 10:57

answered Feb 3, 2016 at 10:09

Serginho

7,5303 gold badges31 silver badges54 bronze badges

2 Comments

Zerok Over a year ago

I know about the ng-include! This is just a test, you know. But no, your code doesn't work either. Nothing shows up in screen nor in console.

Serginho Over a year ago

You did +1 to the worst solution. That's not a good way to work with angular. You should only use jquery selector into directives. But if you want to develop in that way...

Collectives™ on Stack Overflow

How to write HTML inside elements with Angular

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related