Insert html using angularjs between div tags

Question

I saw it was possible to insert HTML between div tags using innerHTML, example:

document.getElementById('mydiv').innerHTML = '<span
class="prego">Something</span>';

I'm working on a Angularjs projet and I tried something similar:

function insertTransmissionHTML(param){
        var transmission = 'transmission'+param;
        var partrans = 'partrans'+param;

        document.getElementById(partrans).innerHTML = '<form class="form-horizontal"><div ng-repeat="param in '+transmission+'"><label class="control-label">{{param.libelle}}</label><input class="form-control" type="text" ng-model="param.valeur"></div></form>';
    }

Then i call the function:

insertTransmissionHTML("FTP");

Here is the HTML:

<div id="partransFTP" class="tab-pane fade">            
</div>

I use a $scope.transmissionFTP with some parameters and i should have something like that:

parameter 1
parameter 2
...

But I have:

 {{param.libelle}}

It looks like the angularjs here isn't working, it becomes a simple HTML.

EDIT: Here is my example at the beginning (it works):

<div id="partransFTP" class="tab-pane fade">
  <form class="form-horizontal"> 
    <div ng-repeat="param in transmissionFTP">
      <label class="control-label">{{param.libelle}}</label>
      <input class="form-control" type="text" ng-model="param.valeur">          
    </div>
  </form>
</div>

And I had all my parameters (from $scope.transmissionFTP)

parameter 1
parameter 2
...

But I have to do something dynamically. Why is it showing {{param.libelle}} and not all my parameters when I use insertTransmissionHTML ?

Has some one a suggestion ? Thank you a lot !

@LiverpoolOwen: I have to create dynamically some div. LucaDeNardi I'll try this but I don't know if it can solve my problem. — C.Norris
– C.Norris, Commented Nov 3, 2017 at 11:04
You almost never want to inject HTML directly into the DOM when using Angular; the framework won't know about it, can't add bindings to it, and will blow it away on the next digest update. Modify scope data and let Angular do the work of drawing it into the DOM. In this case it looks like your form ought to be another Angular directive, or just include it in the current directive's template and ng-show/hide if necessary. — Daniel Beck
– Daniel Beck, Commented Nov 3, 2017 at 13:26

Rani Radcliff · Accepted Answer · 2017-11-03 23:07:41Z

1

I'm tad bit confused regarding your issue, but when I need to inject dynamic HTML I use the following directive:

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

In my Angular controller I save the HTML string to a scope variable

var $scope.myScopeVariable = '<div>My HTML Goes HERE</div>';

, and in my html page, I use:

<div dynamic = "myScopeVariable">

Hopefully, this will help you.

answered Nov 3, 2017 at 23:07

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

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

1 Comment

C.Norris Over a year ago

I tried with an easy example it works fine. But I don't know why when I insert an id it doesnt work, example: $scope.myScoreVariable="<div id="test"></div>" when I use document.getElementById("test") having "null".

Immanuel Kirubaharan · Accepted Answer · 2017-11-03 10:14:43Z

0

You can use Angular ngSanitize, try something like the below example also check the sample plunker :

Template:

<span ng-bind-html="name">

Controller:

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

app.controller('MainCtrl', function($scope, $sce) {
  $scope.name = $sce.trustAsHtml('<b>World</b>');
});

answered Nov 3, 2017 at 10:14

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

1 Comment

Daniel Beck Over a year ago

ng-bind-html won't be sufficient in this case, note that they're trying to inject other angular variables and directives ({{param.libelle}}, ng-model) as well as pure html...

BrianSeng · Accepted Answer · 2017-11-03 22:29:05Z

0

Like others have mentioned, directly interacting with the DOM outside of the Angular digest cycle will produce cases where DOM elements aren't synched w/ Angular directives.

However, to answer your question, I would suggest using/looking into $compile to force Angular to relink $scope and your template together. Try adding something like this to your function:

$compile(angular.element('div#partransFTP').contents())($scope);

answered Nov 3, 2017 at 22:29

BrianSeng

111 silver badge4 bronze badges

Collectives™ on Stack Overflow

Insert html using angularjs between div tags

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related