Angular js, how to append html inside div? (using controller)

Question

i'm trying to append inside the div "otherfield", a directive element,

using while loop in the controller, who is binded to html using updateBoxes function:

HTML

<input type="number" min="2" class="form-control" id="numero_campi" ng-model="numerovoices" ng-change="updateBoxes(numerovoices)">

<div id="otherfield"></div>

JS

//DIRECTIVE
app.directive("listDirective", function() {
return {
    restrict:  'E',
    template : "<h1>This will repeated!</h1>"
};

$scope.updateBoxes = function(param){
    var el = document.getElementById('otherfield');
    var i = 0;
    while (i < param) {
        angular.element(el).append('<list-directive></list-directive>');
        i++;
    }   
}

I'm doing right? it do't work for me...

Does it do anything? Do you get any errors?

Justin Burgard
– Justin Burgard

2017-03-30 16:37:13 +00:00
Commented Mar 30, 2017 at 16:37 — Justin Burgard
– Justin Burgard, Commented Mar 30, 2017 at 16:37

Community · Accepted Answer · 2017-05-23 12:02:02Z

1

For binding in Angular 1.x, you can use ng-bind-html for binding string as HTML.

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

You can also use $sce service for that.Use $sce.trustAsHtml() in the controller to convert the html string.

$sce.trustAsHtml('<list-directive></list-directive>')

Do check this link for more information

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 30, 2017 at 17:17

Muhammed Neswine

2,0571 gold badge21 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angular js, how to append html inside div? (using controller)

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related