How do dynamically add DOM elements in the client controller on serviceportal ?

Serj
Tera Contributor

Hi guys , i have a problem, cant to dynamically add DOM elements on serviceportal via client controller.

 

object.fields.forEach(function(el){
		var options = document.querySelector(".parent")
		var div = document.createElement('div');
		div.setAttribute('class', el.name);
		var span = document.createElement('span');
		span.innerText = el.name
		div.appendChild(span)
		var button = document.createElement('button');
		button.setAttribute('ng-click', 'getNestedElements(' + el + ')');
		div.appendChild(button);
		var element = $compile(div)($scope);
		options.appendChild(element[0]);
})

But here " button.setAttribute('ng-click', 'getNestedElements("' + el + '", "'+ e+ '")');" in element console i see only button ng-click='getNestedELements([Object object])'

1 REPLY 1

jrmarkel
Giga Sage

Not sure exactly what you are trying to do, however, 

I would put this code in the link function:

 

function(scope, element, attrs, ctrl){
    var items = element.find('.panel-body');
    var div = angular.element('<div>');
    div.attr({'class': 'myclass'});
    var button = angular.element('<button>');
    button.attr({'type': 'button', 'ng-click': 'getNestedElements(' + items.length + ')'});
    button.text('anchor1');
    div.append(button);
    var content = $compile(div)(scope);
    element.append(content);
}