Append html element dynamically in angularjs?

beginer

Member

1328 Points

43 Posts

How to append html element dynamically in angularjs? I have following div element in html page

<div class="calendarBox">
</div>

I want to append some html content in this div from controller.

Views: 27703
Total Answered: 2
Total Marked As Answer: 1
Posted On: 04-Jul-2017 21:31

Share:

Answers

Jak

Member

858 Points

132 Posts

Use following:

var divElement = angular.element(document.querySelector('.calendarBox'));
var htmlElement = angular.element('<a href="niceonecode.com">niceonecode.com<a>');
divElement.append(htmlElement);
$compile(divElement)($scope);

Posted On: 05-Jul-2017 03:22

Stevan

Member

310 Points

20 Posts

Get angular element of div
Use .append() method to append html to that angular element

<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<body>
<button ng-click="AppendHtml()">
  Append
</button>
<div id="calendarBox">
</div>
<script>
function myCtrl($scope) {
    $scope.AppendHtml = function() {
     var myEl = angular.element( document.querySelector( '#calendarBox' ) );
     myEl.append('Hi<br/>');     
    }
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>