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 !

Answer 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.

Answer 2

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>');
});

Answer 3

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);