Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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